css hacks (ie6,ie7,ie8,firefox,Chrome)
·ÖÀà:Webǰ¶Ë
IE6ÄÜʶ±ðÏ»®Ïß"_"ºÍÐǺÅ" * "£¬IE7ÄÜʶ±ðÐǺÅ" * "£¬µ«²»ÄÜʶ±ðÏ»®Ïß"_"£¬ IE8ÄÜʶ±ð" \9"£¬µ«²»ÄÜʶ±ðÏ»®Ïß"_"£¬ ¶øfirefoxÁ½¸ö¶¼²»ÄÜÈÏʶ,È´¿ÉÒÔʶ±ð‘!important’¡£µÈµÈ
Êéд˳Ðò£¬Ò»°ãÊǽ«Ê¶±ðÄÜÁ¦Ç¿µÄä¯ÀÀÆ÷µÄCSSдÔÚºóÃæ¡£ÏÂÃæÁоٳ£ÓõÄCSS hack·½·¨
1£º!important
!important×÷ÓÃÊÇÌá¸ßÖ¸¶¨Ñùʽ¹æÔòµÄÓ¦ÓÃÓÅÏÈȨ¡£
IE7ÒÔ¼°ËùÓбê×¼ä¯ÀÀÆ÷ÄÜʶ±ð!important
Çø±ðIE6ÓëIE7ÓëÆäËûä¯ÀÀÆ÷
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
ÔÚMozillaÖлòÕßIE7ä¯ÀÀʱºò£¬Äܹ»Àí½â!importantµÄÓÅÏȼ¶£¬Òò´ËÏÔʾ#60A179µÄÑÕÉ«£º
ÔÚIE6ÖÐä¯ÀÀʱºò£¬²»Äܹ»Àí½â!importantµÄÓÅÏȼ¶£¬Òò´ËÏÔʾ#00FµÄÑÕÉ«£º
2£º*
IE¶¼ÄÜʶ±ð*£»±ê×¼ä¯ÀÀÆ÷(Èç»ðºü)²»ÄÜʶ±ð*
Çø±ðIE6Óë»ðºü
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
Çø±ðIE7Óë»ðºü
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
Çø±ðIE7£¬IE6Óë»ðºü
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3£º_
IE6Ö§³ÖÏ»®Ïߣ¬IE7ºÍfirefox¾ù²»Ö§³ÖÏ»®Ïß
Çø±ðIE7£¬IE6Óë»ðºü
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
/*²»¹ÜÊÇʲô·½·¨£¬ÊéдµÄ˳Ðò¶¼ÊÇfirefoxµÄдÔÚÇ°Ãæ£¬IE7µÄдÔÚÖм䣬IE6µÄдÔÚ×îºóÃæ*/
4£º*+html Óë *html
*+html Óë *html ÊÇIEÌØÓеıêÇ©, firefox Ôݲ»Ö§³Ö.¶ø*+html ÓÖΪ IE7ÌØÓбêÇ©
.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */
5£º\9 רÊôIE8µÄHack
.browserTest { width: 120px\9; } /* IE8 fixed */
6£ºChrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Õë¶Ô Google Chrome¡¢Safari 3.0¡¢Opera 9 µÄCSSÑùʽ */
}
@media screen and (-webki
Ïà¹ØÎĵµ£º
ËäÈ»CSSÑùʽµÄѧϰÐèÒªÎÒÃǶ¯ÊÖ¶àʵ¼ù£¬ÐèÒª¶à×ö°¸Àý£¬Ë¼ÖÂ˼¿¼£¬µ«ÓÐʱºò×¢Òâ×ÊÁϵÄÊÕ¼¯ÓëÕûÀíÒ²ÊǷdz£ÖØÒªµÄ£¬ÔÚʵ¼Ê¿ª·¢ÖÐÍùÍù»áÆðµ½Ê°빦±¶µÄЧ¹û¡£ÏÂÃæÒ»Ð©¹ØÓÚ°´Å¥¡¢Îı¾¿ò¡¢±íµ¥µÄ³£ÓÃCSSÑùʽ¡£´ó¼Ò¿ÉÒԲο¼¡£
Ò»¡¢°´Å¥Ñùʽ
.buttoncss {
font-family: "tahoma", "ËÎÌå" ......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>FLYSO Blog-- JS´úÂëʵÏÖµÄ×Ô¶¯·ÖҳЧ¹û~!</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT=""& ......
#weblmenu
{
height:22px;
width:700px;
float:left;
display:inline;
text-align:left;
}
#weblmenu ul
{
height:22px;
width:700px;
text-align:left;
float:left;
}
#weblmenu ul li
{
height:22px;
width:110px;
float:left;
list-style-type:none;
text-align:center;
word-break:break-all;
} ......
僞Àà ÒâÒå
:first-child µÚÒ»¸öº¢×ÓÔªËØ
:first-line&nb ......
½ñÌìÏÂÎ磬ÊÖÍ·ÉÏûʲôÊÂ×ö£¬ÓÚÊǾÍÉÏÍø²é¿´×ÊÁÏ£¬¿´µ½ºÜ¶àÈËдµÄYUI CompressorµÄʹÓ÷½·¨£¬´óÖÂдµÄ¶¼²»Ïêϸ£¬ÓÚÊÇ×Ô¼ºÀ´×ö¸ö×ܽᡣ
£¨1£©Ê×ÏÈÀ´¿´Ï£¬ÎªÊ²Ã´ÒªÑ¹Ëõjs»òcssÎļþ£¿
JS/CSSÎļþ´ó£¬Óû§·ÃÎÊÕ¾µãµÄʱºòÐèÒªÏÂÔØJS/CSSµÄʱ¼ä³¤¾Í»á¸Ð¾õÂý£¬ÓеÄÉõÖÁÓÉÓÚCSSµÄÎļþ¶øÔì³ÉÒ³Ãæ³õʼ´ò¿ªºÜÁèÂÒ¡ ......