zoukankan      html  css  js  c++  java
  • IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.

    我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSS hack十分了解了,现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣,可苦了我们这些Web前端开发人员了。

    我在这里稍微整理了一下前面了解的各浏览器的CSS hack,打包奉献一下,哈哈。

    各浏览器CSS hack兼容表:

    IE6IE7IE8FirefoxChromeSafari
    !importantYY
    _Y
    *YY
    *+Y
    \9YYY
    \0Y
    nth-of-type(1)YY

    代码示例:

    #test{
    color:red; /* 所有浏览器都支持 */
    color:red !important;/* Firefox、IE7支持 */
    _color:red; /* IE6支持 */
    *color:red; /* IE6、IE7支持 */
    *+color:red; /* IE7支持 */
    color:red\9; /* IE6、IE7、IE8支持 */
    color:red\0; /* IE8支持 */
    }

    body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

    整体测试代码示例:

    .test{
    color:#000000;
    color:#0000FF\0;
    [color:#00FF00;
    *color:#FFFF00;
    _color:#FF0000;
    }

    其他说明:

    1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
    <meta http-equiv=”x-ua-compatible” content=”ie=7″ />

    2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

    3、还有其他写法,比如:
    *html #test{}或者 *+html #test{}

    4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:

    http://www.w3.org/TR/html4/loose.dtd

    5、顺序:Firefox、IE8、IE7、IE6依次排列。

    小知识:什么是CSS hack?

    由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

    这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

  • 相关阅读:
    Linux下sed,awk,grep,cut,find学习笔记
    Python文件处理(1)
    KMP详解
    Java引用详解
    解决安卓中页脚被输入法顶起的问题
    解决swfupload上传控件文件名中文乱码问题 三种方法 flash及最新版本11.8.800.168
    null id in entry (don't flush the Session after an exception occurs)
    HQL中的Like查询需要注意的地方
    spring mvc controller间跳转 重定向 传参
    node to traverse cannot be null!
  • 原文地址:https://www.cnblogs.com/top5/p/2269446.html
Copyright © 2011-2022 走看看