加载中…
CSS对各浏览器（IE/FF）兼容问题
(2007-11-27 16:36:08)
标签：
IT/科技ieffcss |
真搞不懂为什么有那么多形形色色的浏览器存在于网路中，用户有了很多选择，可是却苦了我们这些设计者们了啊，自从上次摊上北银网银demo原型制作的事后，他们的网上商城我又得接着搞了。于是这个关于css对各浏览器的兼容问题就搞的我头疼的很。
经过这两天的——查资料＋经验理解＋亲手制作，总结一篇文章来留档，也希望对大家有用，有什么错误大家指正，一起进步～
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
补充：非常感谢Aaron的帮助
最好的解决办法放在上面，下面的内容就可以不看了
区分三款浏览器简单方法:
#example
*
*+html
马上试了一下，效果很好，不过有句要补充一下！
在兼容IE7的*+html的hack一定要在顶部加入DTD声明，否则无效
将下面这句声明加入下面可运行的html的顶部，就可以看到效果拉~当然要保证你的浏览器是IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#color {
background:blue;
}
* html #color {
background:red;
}
* +html #color {
background:yellow;
}
</style>
</head>
<body>
</body>
</html>
1.为什么在不同的浏览器显示效果不一样？
因为不同浏览器对于css样式表的解析不一样，所以导致样式乃至层布局发生变化。例如，ff中设置padding属性时，div会相应增加height和width，而ie的解析是不会的，再例如ff对盒模型的解析和ie相差两个象素。
2.设计时要做到所有浏览器都兼容吗？
我的答案是即使能做到也没有必要去做，科技是在进步的，用户总是在推陈出新的使用这新版本的浏览器，根据“设计诉说”的站点统计小样本结果显示，6225个访问者中有72.1%使用IE6.0；12.7%使用IE7.0；7.9%在使用FF2.0，剩余的不同版本的浏览器占的百分比都不到1%。所以我认为只要做到IE6
FF2.0
以及新出的IE7.0兼容即可，顶多向下兼容一下IE5.5，完全没有必要为了那些个小数点费劲脑子。如果有必要可以另外设计css文件，然后通过js判断浏览器版本进行选择相应的文件。
3.css样式的优先级是怎么样的？
这个是个好问题，当你弄明白这个，我想应该可以很自如的运用一些兼容样式表的技巧了。在正常的IE中，如果你在css中重复定义一个属性时，浏览器解析的是后面的属性，举个例子
box {
height:100px;
height:200px;
height:400px;
height:300px;
}
重复定义盒模型的高度属性，越后面优先级越高，所以浏览器解析出的结果就是高度为300px。
4.如何做到让IE6.0与FF兼容？
最常用的一种方法了，也是屡试不爽的——“!important”，这个字段是用来提高优先级的，而IE6.0对于找个字段是无法识别的，于是FF与IE6.0就可以分开解析了。例如，在IE下显示red，FF下显示blue，只需要这么写
color {
background-color:blue !important;
background-color:red;
}
“!important”FF可以识别，blue那行提高优先级，因此在FF中blue优先级高于red，显示为蓝色
IE6.0将上面的样式识别成
color {
background-color:blue;
background-color:red;
}
red优先级高，所以显示为红色。
切记，上下两句的位置一定不能颠倒。问为什么的再好好看看上两个问题，再不明白就面壁去....
5.如何做到让更低版本IE兼容？
其实我认为做到IE6.0与FF2.0已经足够，5.5的兼容用“
”
5.0的兼容用“>”，具体我就不说了，说实在我也不大懂，大家可以去google一下
6.如何做到IE7.0兼容？
这个问题我也要问大家，大家有答案的告诉我，因为新版的IE7.0对于“!important”具有识别能力，可是对于盒以及padding等的解析却和IE6.0差不多，于是乎，完全兼容了IE6.0和FF2.0的就似乎兼容不了IE7.0，捣腾了好久，还是不知道怎么办。呵呵。
7.css对浏览器兼容应做到完全一致吗？
个人认为在满足可读性的原则和不影响整体布局的前提下，界面有些许的位置不同是可以允许的，要在不同浏览器下做到一模一样，那真是太费劲了。
恩，先这些吧，欢迎大家指正和补充～
喜欢
0
赠金笔