css兼容性问题

先来谈谈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 */
    }

所以可以按着优先级就能给特定的版本捎上特定颜色

可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6

.type{
color: #111; /* all */

    color: #222\9; /* IE */
    *color: #333; /* IE6/IE7 */
    _color: #444; /* IE6 */
    }

所以可以按着优先级就能给特定的版本捎上特定颜色

1.不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
2.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

豪豪豪10px

3.ie6下，如果给元素设置float,同时给float同一方向设置margin值，则ie6下表现出双倍的边距
.demo {
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
　　}

4.(16)IE6下div高度无法小于10px
　　比如定义一条高2px的线条，FF和IE7都正常

但IE6就是10px

解决的办法有两种：添加overflow属性或设置fontsize大小为高度大小如：

&nbps;

5.CSS控制透明度问题：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60) 但在IE6下又有问题，所以又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); 6.鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer 7.很多时候可能会纳闷超链接访问过后样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A 简单的记法是 love hate

a:link{} a:visited{} a:hover{} a:active{}

猜你喜欢