css常见的浏览器Hack技巧总结

如果你是前端程序员,那么你需要解决浏览器页面或不兼容的问题。浏览器的兼容性问题大部分还集中在兼容IE系列。在这里总结CSS Hack IE系列对未来的访问记录.

IE Hack

IE系列浏览器的hack大略如下:

  • _nowamagic:1px;-----------ie6
  • *nowamagic:1px;-----------ie7
  • nowamagic:1px\0;----------ie89
  • nowamagic:1px\9\0;--------ie9
  • :root nowamagic:1px; ----ie9(实际情况可能ie9还是有问题,再用这种方式)

这样就基本上就可以兼容所有IE。(图片不清晰,点击放大看)

hack4

其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下:

Firefox 与 Chrome 的 Hack

Firefox:

  1. @-moz-document?url-prefix()????/*写在选择器外层时(只可写在此处):Firefox?only*/

Chrome:

  1. @media?screen?and?(-webkit-min-device-pixel-ratio:0) ?{ ?/*写在选择器外层时(只可写在此处):Chrome?only*/}

使用示例:

  1. @-moz-document?url-prefix()????/*Firefox*/
  2. {
  3. ????body
  4. ????{
  5. ????????background-color:pink;
  6. ????}
  7. }

浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

CSS 实例

  1. background:?red;???????/*?对FF?Opera和Safari有效?*/
  2. #background:?blue;??????/*?对?IE6?和?IE7有效?*/
  3. _background:?green;??????/*?只对IE6有效?*/
  4. /*/background:?orange;*/??????/**?只对IE8有效?**/
  5. !important?????????/*FF、IE7有效*/
  6. *?????????/*IE都有效*/

IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

混用起来大约是这样:

  1. :root?.demo?{
  2. ????background:#963\9;?/*?仅IE9适用?*/
  3. }
  4. .demo?{
  5. ????width:?300px;
  6. ????height:?200px;
  7. ????background:?#036;?/*?所有浏览器都适用?*/
  8. ????background:?#09F\9;?/*?IE6~IE9?*/
  9. ????background:?#09F\0;?/*?IE8~IE9?*/
  10. ????background:?#09F\0/;?/*?IE8?*/
  11. ????*background:?#F60;?/*?IE6/IE7?*/
  12. ????+background:?#F60;?/*?IE6/IE7?*/
  13. ????@background:?#F60;?/*?IE6/IE7?*/
  14. ????>background:?#F60;?/*?IE6/IE7?*/
  15. ????_background:?#ccc;?/*?IE6?*/
  16. }
  17. @media?all?and?(min-width:0)?{
  18. ????.demo?{
  19. ????????background:?#F06;?/*?webkit?and?opera?*/
  20. ????}
  21. }
  22. @media?screen?and?(-webkit-min-device-pixel-ratio:0){
  23. ????.demo?{background:#609;}/*webkit?(&?Opera9.2)*/
  24. }
标签: