史上最适用的最直观的CSS Hack参考手册
程序员文章站
2024-03-24 19:29:28
...
把下面的代码保存为html, 然后在不同的浏览器中打开, 则CSS Hack一目了然. 试一下你就知道了.
当然可能大师在总结这个列表的时候，一些浏览器还没有出来，比如IE9, Chrome12等等， 所以部分结论可能对这些最新的浏览器不成立。
如图是我在FF下的观测结果:
<!DOCTYPE html>
<html>
<head>
<title>Demo | CSS Hacks</title>
<style type="text/css">
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { background: #FFDECE; border: 2px solid #ff0000 }
/* IE7 */
*:first-child+html #dos { background: #FFDECE; border: 2px solid #ff0000 }
/* IE7, FF, Saf, Opera */
html>body #tres { background: #FFDECE; border: 2px solid #ff0000 }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { background: #FFDECE; border: 2px solid #ff0000 }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { background: #FFDECE; border: 2px solid #ff0000 }
/* Safari 2-3 */
html<span style="font-weight: bold;">[xmlns*=""]</span> body:last-child #seis { background: #FFDECE; border: 2px solid #ff0000 }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { background: #FFDECE; border: 2px solid #ff0000 }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
#sietepointfive:nth-of-type(1n) { background: #FFDECE; border: 2px solid #ff0000 }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { background: #FFDECE; border: 2px solid #ff0000 }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/* Safari 2 - 3.1 */
html<span style="font-weight: bold;">[xmlns*=""]</span>:root #trece { background: #FFDECE; border: 2px solid #ff0000 }
/* Safari 2 - 3.1, Opera 9.25 */
*|html<span style="font-weight: bold;">[xmlns*=""]</span> #catorce { background: #FFDECE; border: 2px solid #ff0000 }
/* Everything but IE6-8 */
:root *> #quince { background: #FFDECE; border: 2px solid #ff0000 }
/* IE7 */
*+html #dieciocho { background: #FFDECE; border: 2px solid #ff0000 }
/* Opera 9+, Chrome2+, Saf4+, FF3.5+*/
@media all and (min-width: 0px){
#veintitres{ background: #FFDECE; border: 2px solid #ff0000 }
}
/* Opera 9+, Chrome2+, Saf4+, FF3.0+*/
/* assumes attribute/value on html tag */
html:lang(en)>body #veintiuno { background: #FFDECE; border: 2px solid #ff0000 }
/* Opera 9+, Chrome2+, Saf4+, FF3.5+*/
body:nth-of-type(1) #veintidos { background: #FFDECE; border: 2px solid #ff0000 }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { background: #FFDECE; border: 2px solid #ff0000 }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { background: #FFDECE; border: 2px solid #ff0000 }
/* unknown ---Hides from IE6--- */
* > #dieciseis { background: #FFDECE; border: 2px solid #ff0000 }
/* unknown */
html:only-child #nueve { background: #FFDECE; border: 2px solid #ff0000 }
/***** Attribute Hacks ******/
/* IE6 */
#once { _background: #C4D6FD; _border: 2px solid #0000FF}
/* IE6, IE7 */
#doce { *background: #C4D6FD; *border: 2px solid #0000FF}
/* IE6, IE7 */
#veintiseis { .background: #C4D6FD; .border: 2px solid #0000FF}
/* Everything but IE6 */
#diecisiete { background /**/: #C4D6FD; border /**/: 2px solid #0000FF}
/* IE6, IE7, IE8 */
#diecinueve { background : #C4D6FD\9; border : 2px solid #0000FF\9;}
/* IE7, IE8 */
#veinte { background /*\**/: #C4D6FD\9; border /*\**/: 2px solid #0000FF\9}
/* IE6, IE7 -- acts as an !important */
/* string after ! can be anything */
#veintisiete { background: #C4D6FD !ie; border: 2px solid #0000FF !ie; }
.test{
margin: 5px 0;
}
</style>
</head>
<div id="container">
<h1>Selector hacks</h1>
<div class="test" id="uno">Red if <code>* html</code> matches in this browser. <span style="font-weight: bold;">[IE6 and below ]</span></div>
<div class="test" id="dos">Red if <code>*:first-child+html </code> matches in this browser. <span style="font-weight: bold;">[IE7]</span></div>
<div class="test" id="tres">Red if <code>html>body</code> matches in this browser <span style="font-weight: bold;">[IE7, FF. Saf, Opera]</span></div>
<div class="test" id="cuatro">Red if <code>html>/**/body </code> matches in this browser. <span style="font-weight: bold;">[IE8, FF, Saf, Opera (Everything but IE 6,7)]</span></div>
<div class="test" id="cinco">Red if <code>html:first-child</code> matches in this browser. <span style="font-weight: bold;">[Opera 9.27 and below, safari 2]</span></div>
<div class="test" id="seis">Red if <code>html<span style="font-weight: bold;">[xmlns*=""]</span> body:last-child</code> matches in this browser. <span style="font-weight: bold;">[Safari 2-3]</span></div>
<div class="test" id="siete">Red if <code>body:nth-of-type(1)</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div>
<div class="test" id="sietepointfive">Red if <code>div:nth-of-type(1n)</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div>
<div class="test" id="ocho">Red if <code>body:first-of-type</code> matches in this browser. <span style="font-weight: bold;">[safari 3+, chrome 1+, opera9+, ff 3.5+]</span></div>
<div class="test" id="diez">Red if <code>@media screen and (-webkit-min-device-pixel-ratio:0)</code> matches in this browser. <span style="font-weight: bold;">[saf3+, chrome1+ ]</span></div>
<div class="test" id="trece">Red if <code>html<span style="font-weight: bold;">[xmlns*=""]</span>:root</code> matches in this browser. <span style="font-weight: bold;">[Safari 2 - 3.1]</span></div>
<div class="test" id="catorce">Red if <code>*|html<span style="font-weight: bold;">[xmlns*=""]</span></code> matches in this browser. <span style="font-weight: bold;">[Safari 2 - 3.1, Opera 9.25]</span></div>
<div class="test" id="quince">Red if <code>:root *></code> matches in this browser. <span style="font-weight: bold;">[Everything but IE6-8]</span></div>
<div class="test" id="dieciocho">Red if <code>*+html</code> matches in this browser. <span style="font-weight: bold;">[IE7]</span></div>
<div class="test" id="deiciseis">Red if <code>* ></code> matches in this browser. <span style="font-weight: bold;" title="test and find that it does not work in Chrome 12+">[Opera 9+, Chrome2+, Saf4+, FF3.5+]</span></div>
<div class="test" id="nueve">Red if <code>html:only-child</code> matches in this browser. <span style="font-weight: bold;" title="test and find that it does not work in Chrome 12+">[Opera 9+, Chrome2+, Saf4+, FF3.0+, assumes attribute/value on html tag]</span></div>
<div class="test" id="veintitres">Red if <code>@media all and (min-width: 0px)</code> matches in this browser. <span style="font-weight: bold;">[Opera 9+, Chrome2+, Saf4+, FF3.5+]</span></div>
<div class="test" id="veintiuno">Red if <code>html:lang(en)>body </code> matches in this browser. <span style="font-weight: bold;">[Firefox only. 1+]</span></div>
<div class="test" id="veintidos">Red if <code>body:nth-of-type(1)</code> matches in this browser. <span style="font-weight: bold;">[Firefox 3.0+]</span></div>
<div class="test" id="veinticuatro">Red if <code> x:-moz-any-link</code> matches in this browser. <span style="font-weight: bold;">[unknown ---Hides from IE6---]</span></div>
<div class="test" id="veinticinco">Red if <code> x:-moz-any-link, x:default</code> matches in this browser. <span style="font-weight: bold;">[unknown]</span></div>
<h1>Attribute hacks</h1>
<div class="test" id="once">Blue if <code>div { _background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6]</span></div>
<div class="test" id="doce">Blue if <code>div { *background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7]</span></div>
<div class="test" id="veintiseis">Blue if <code>div { .background: blue}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7]</span></div>
<div class="test" id="diecisiete">Blue if <code>div { background/**/: blue}</code> matches in this browser. <span style="font-weight: bold;">[Everything but IE6]</span></div>
<div class="test" id="diecinueve">Blue if <code>div { background: blue\9;}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7, IE8]</span></div>
<div class="test" id="veinte">Blue if <code>div { background/*\**/: blue\9;}</code> matches in this browser. <span style="font-weight: bold;">[IE7, IE8]</span></div>
<div class="test" id="veintisiete">Blue if <code>div { background: blue !ie;}</code> matches in this browser. <span style="font-weight: bold;">[IE6, IE7 -- acts as an !important, string after ! can be anything]</span></div>
</div>
</body>
</html>