Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

Goodbye to CSS Hack


¿´¿´ÏÂÃæÕâ¶Î´úÂ룬ÊÇ·ñ±¶¸ÐÇ×Çе«ÓÖ¾õµÃºÜİÉúÄØ£º
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid red; /* ie8 */
}
Ëæ×Åä¯ÀÀÆ÷µÄ¸üл»´ú£¬CSS Hack ±äµÃÔ½À´Ô½¹îÒìºÍ²»¿É¿¿ÁË-.-
Ïà¶ÔÀ´Ëµ£¬IE µÄÌõ¼þ×¢ÊÍÊÇÖµµÃÐÅÀµµÄ£º
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->
<style type="text/css">
body.ie6 .test { background-color: blue }
body.ie7 .test { background-color: red }
body.ie8 .test { background-color: green }
</style>
×¢Ò⣬ÉÏÃæµÄ´úÂëËäȻҲÊÇ hack£¬µ«´ó´ó¼ò»¯ºÍ¹æ·¶ÁË css hack µÄд·¨¡£
×î½ü¿´ ExtCore 3.0 µÄ´úÂ룬·¢ÏÖ Ext ³õʼ»¯Ê±»á×Ô¶¯¸ø body Ìí¼Óä¯ÀÀÆ÷ÐÅÏ¢£º
//Initialize doc classes
(function(){
var initExtCss = function(){
// find the body element
var bd = document.body || document.getElementsByTagName('body')[0];
if(!bd){ return false; }
var cls = [' ',
Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
: Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
: Ext.isOpera ? "ext-opera"
: Ext.isWebKit ? "ext-webkit" : ""];
if(Ext.isSafari){
cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
}else if(Ext.isChrome){
cls.push("ext-chrome");
}
if(Ext.isMac){
cls.push("ext-mac");
}
if(Ext.isLinux){
cls.push("ext-linux");
}
if(Ext.isBorderBox){
cls.push('ext-border-box');


Ïà¹ØÎĵµ£º

css µÄÃüÃû¹æ·¶

 Ò»£®ÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
¶þ£®³£ÓÃÀà/IDÃüÃû¹æ·¶
Ò³¡¡Ã¼£ºheader
ÄÚ¡¡ÈÝ£ºcontent
ÈÝ¡¡Æ÷£ºcontainer
Ò³¡¡½Å£ºfooter
°æ¡¡È¨£ºcopyright¡¡
µ¼¡¡º½£ºmenu
Ö÷µ¼º½£ºmainMenu
×Óµ¼º½£ºsubMenu
......

CSS hack:Çø·ÖIE6£¬IE7£¬firefox


Çø±ðIE6ÓëFF£º
       background:orange;*background:blue;
Çø±ðIE6ÓëIE7£º
       background:green !important;background:blue;
Çø±ðIE7ÓëFF£º
       background:orange; *background:green;
Çø±ðFF£¬IE7£¬IE6£º
      ......

ÍøÕ¾ºÚ°×°æµÄcssÑùʽ

1¡¢CSS·ç¸ñÍøÕ¾£¬½«ÏÂÃæÕâ¶Î´úÂëÌí¼Óµ½ÍøÕ¾cssÎļþ×î¶¥¶Ë¡£
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
»òÕߣº
ÔÚcssÎļþµÄbodyÖмÓÈëfilter:gray£º
body {filter:gray}
¡¡¡¡2¡¢Î´ÆôÓÃCSS·ç¸ñÍøÕ¾£¬ÔÚÍøÒ³»òÕßÄ£°åµÄHTML´úÂëºÍÖ®¼ä²åÈëÒÔÏ´úÂ룺
<style>
html{filter:pro ......

ÍøÕ¾±äºÚ»ÒÉ«CSSÂ˾µ´úÂë

ÍøÕ¾±äºÚ»ÒÉ«CSSÂ˾µ´úÂë
Òý×Ô:http://edu.seuuo.com/html/81/n-12181.html
Ϊ·½±ãÕ¾µã°§µ¿£¬ÌØÌṩcssÂ˾µ´úÂ룬ÒÔ±í°§µ¿¡£ÒÔÏÂΪȫվCSS´úÂë¡£
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨£ºÕâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×£¬½«´úÂë¼Óµ½CSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°¡£½¨ÒéÈ«¹úÕ¾³¤¶¯ ......

CSS hack:Çø·ÖIE6£¬IE7£¬firefox

ת×Ô£ºhttp://www.div-css.com/html/XHTML-CSS/hack/1136667.html
Çø±ð²»Í¬ä¯ÀÀÆ÷£¬CSS hackд·¨£º
Çø±ðIE6
ÓëFF
£º
       background:orange
;*
background:blue
;
Çø±ðIE6
ÓëIE7
£º
       background:green
 !important
;background:blue
;
Çø±ðIE7
Ó ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ