史上最适用的最直观的CSS Hack参考手册

来源：互联网发布：禁止加载驱动软件编辑：程序博客网时间：2024/05/16 01:34
把下面的代码保存为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>