CSS常见兼容性问题总结_html/css_WEB-ITnose

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争

先来谈谈CSS Hack

　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

　　（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

     你想要执行的代码      你想要执行的代码      你想要执行的代码

　　 (2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important FireFox不能识别 * _ \9

可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6.type{        color: #111; /* all */        color: #222\9; /* IE */        *color: #333; /* IE6/IE7 */        _color: #444; /* IE6 */        }所以可以按着优先级就能给特定的版本捎上特定颜色

一般来说，只有IE6不支持 !important 所以可以这样#example{    width: 100px !important; /* IE7  FF */    width: 110px; /* IE6 */因为!important 具有最高优先级，所以此种方式可以区别出来~

为什么说一般呢...你看看下面这个例子，IE6貌似还认得出!important

    h1{color: #f00 !important; }    h1{color: #000;}    h2{color: #f00 !important; color: #000;}test1
test2

　　（3）选择器前缀法，顾名思义，就是给选择器加上前缀。

IE6可识别 *div{color:red;}  IE7可识别 *+div{color:red;}

再来看看主要的兼容问题：

　　（1）最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善。

贴一个淘宝的样式初始化~

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }    h1, h2, h3, h4, h5, h6{ font-size:100%; }    address, cite, dfn, em, var { font-style:normal; }    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }    small{ font-size:12px; }    ul, ol { list-style:none; }    a { text-decoration:none; }    a:hover { text-decoration:underline; }    sup { vertical-align:text-top; }    sub{ vertical-align:text-bottom; }    legend { color:#000; }    fieldset, img { border:0; }    button, input, select, textarea { font-size:100%; }    table { border-collapse:collapse; border-spacing:0; }

　　 (2)IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行

     html,body,div{ margin: 0;padding: 0;}    .wrap{width: 200px; height: 200px; border: 1px solid #333;}    .box{float: left; /* display:inline */ ;margin-left: 10px; width: 80px; height: 80px; background-color: green;}           


      
查看更多关于CSS常见兼容性问题总结_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did107376

更新时间：2022-11-17 阅读：31次