CSS浏览器兼容问题整理(转)
若干个浏览器内核不同CSS解析可能就不同,甚至同一个内核的浏览器版本不同解析也可能不同:(
页面的CSS对于写程序虽然不是非常重要,不过就解决事情的一个整体流程而言,多多了解一些绝对没有坏事!
这又是一个整理并转载别人的总结。说实话,不太喜欢用一些Hack之类的,我写CSS的时候基本就是用手册和标准规定的东西。然后再打开不同浏览器发现问题,然后根据具体情况具体写,不过有时候某些变态问题真的很麻烦:(
浏览器真的是一个朝三暮四的讨厌家伙,希望什么时候各个浏览器都能遵循标准来解析,让页面不再用Hack!
同时,也呼吁一下大家将自己的浏览器升级一下吧,7年前的IE6真的不怎么地!!换IE7吧!!
不罗嗦了,开始——转——
收集整理一些IE与FF的CSS兼容设计问题
margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<div id=”float”></div>相应的css为#float{float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
下面是关于IE7的hack:
针对firefox ie6 ie7的css样式:
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999
可以用”+”来实现只有IE识别的CSS Hack
可能有朋友想到用”_” Hack,但它们是由区别的,因为IE7中是不识别“_”的。所以用+测试结果:
IE5.5,IE6 ,IE7浏览器都能识别;
FF2.0,Opera 9,Safari 2浏览器不识别。