IE、Nascape环境中CSS的显示差别
Author:52css Data:2007-04-12
Web建造者要对付的最棘手情况之一是：相同的CSS代码被不同的浏览器解释后会生成不同的效果。在以前，各种不同的浏览器生成极其不同的页面是随处可见的，而现在我们可以用所谓的符合标准的浏览器获得更好的效果。然而，显示效果的差别还是无法避免。
当前处于领导地位的一些浏览器在处理浮动效果上就存在着这样的差别。如果有人想创建一个能够随着浏览器窗口的大小变化而动态更改大小多栏的布局，那么这将是一个特别麻烦的问题。
简单的没有浮动的页面
假设你有两个div——div#one和div#two，它们都有固定的宽度。如果没有浮动或者绝对的定位，这些div就会以一个摞在另一个之上的形式放在浏览器窗口的左侧（如例A所示），因为标准的页面安排顺序是从左到右，从上到下，块级元素（block-level element）都会在前一个元素下面紧接着开始一个新的行。
下面是所有例子都需要的一段HTML：
当前处于领导地位的一些浏览器在处理浮动效果上就存在着这样的差别。如果有人想创建一个能够随着浏览器窗口的大小变化而动态更改大小多栏的布局，那么这将是一个特别麻烦的问题。
简单的没有浮动的页面
假设你有两个div——div#one和div#two，它们都有固定的宽度。如果没有浮动或者绝对的定位，这些div就会以一个摞在另一个之上的形式放在浏览器窗口的左侧（如例A所示），因为标准的页面安排顺序是从左到右，从上到下，块级元素（block-level element）都会在前一个元素下面紧接着开始一个新的行。
下面是所有例子都需要的一段HTML：
Example Source Code
[www.52css.com]
<body>
<div id="one">
Port side text...
</div>
<div id="two">
Second column text...
</div>
</body>
<div id="one">
Port side text...
</div>
<div id="two">
Second column text...
</div>
</body>
下面的CSS代码用于基本的、不带浮动的版本：
Example Source Code
[www.52css.com]
div#one {
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: 300px;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: 300px;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
基本的浮动
当你创建一个包含有float: left或者float: right属性的CSS样式，并把它应用到诸如div标签这样的块级元素上的时候，div就会从文档的普通文本安排顺序里被删除，并被强制放到包含元素（containing element）的左侧或者右侧。如果包含元素是一个主体标签，那么div就会浮动到浏览器窗口的一侧。否则，浮动的div就会移动到包含div的边缘，而以前是不会这样的。
如果你有一个以上的浮动元素，那么第二个和随后的浮动元素会紧接着第一个排成一条，其排列方式非常像文本里的一行字母。一系列浮动元素会对齐成一行，直到撑满浏览器窗口的整个宽度，然后换到下一行，就像段落里的文字那样排列。
固定宽度的浮动
只要div#one和div#two具有固定宽度，而且其总宽度小于浏览器窗口的宽度，它们就会像例B所示的那样紧挨着排在一起。几个大的浏览器在处理固定宽度浮动的方式上保持着相当的一致性。下面的CSS代码所生成的页面在IE6、Netscape 7、Mozilla 1和Opera 7里显示出来是一模一样的。
Example Source Code
[www.52css.com]
div#one {
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
float: left;
width: 300px;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
float: left;
width: 300px;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
可变宽度的浮动带来了可变的结果
当你想把div变成宽度可变的时候，生成浮动效果不一致的问题就浮现出来了。例如，假设你想要在页面的左侧放一个固定宽度栏，用于导航按钮的列表，而想在右侧放另外一个栏，让它根据浏览器窗口（的大小）自由扩展和收缩。
你可能会认为自己用两个左侧浮动的div就能实现这个效果；一个是固定宽度的，而另一个把宽度设定为自动，让div自动调整大小，这样它就能够填补第一个div和浏览器窗口右侧之间的空白。例C就是下面代码显示的结果：
Example Source Code
[www.52css.com]
div#one {
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
float: left;
width: auto;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
float: left;
width: auto;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
如果在IE里显示这个例子，你会获得预计的效果，即左边是固定宽度的栏，紧挨着它右侧的是一个可变宽度的栏；但是，相同的代码在其他当前流行的浏览器上却会生成不同的结果。第二个div会掉到第一个的下面，而不是接着这一行放在右边。结果就和不带浮动的页面非常类似。
解决方案
要获得这种两栏布局，其中一栏能够自动调整大小的理想效果的一种解决方案是对第一栏使用浮动div，但是要从必须调整大小的那一栏里把浮动删掉。由于浮动栏和普通的文档安排顺序是分离的，所以常规的div会被放在上方，但是在浮动div的下方。在左边添加一个padding，并让其等于浮动div的宽度，而常规div的内容看起来就会像是放在左边div右侧的一个栏里。例D说明了这个技巧。下面的代码能够在当前所有的浏览器里生成相同的效果。
Example Source Code
[www.52css.com]
div#one {
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: auto;
padding: 0px 10px 5px 160px;
margin: 0px;
background-color: silver;
}
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: auto;
padding: 0px 10px 5px 160px;
margin: 0px;
background-color: silver;
}
尽管当前Netscape／Mozilla浏览器一般都被认为要比IE更加符合标准，但是我个人认为IE生成浮动元素的效果要比前两个浏览器更加一致。但是如果不考虑哪一个生成的效果是“正确的”，那么其差别就会给Web建造者带来最头疼的问题。要避免你的页面设计出现问题，知道浏览器生成的效果会有所不同是第一步，也是最重要的一步。
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，捣腾了好久，还是不知道怎么办。不过有点要说，现在IE7.0的正式版还没有出来，所以先不着急吧，呵呵。
7.css对浏览器兼容应做到完全一致吗？
个人认为在满足可读性的原则和不影响整体布局的前提下，界面有些许的位置不同是可以允许的，要在不同浏览器下做到一模一样，那真是太费劲了。
20070813
本CSS Hack代码范例，可以直观显示各个版本浏览器hack的使用。兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0。
IE7.0简体中文正式版发布了，对于我等常和网页打交道的人来说网页兼容性问题也随之而来了。IE7.0有一个显著的改变就是支持!important了，是件好事情，但是也给广大的在IE6时代使用!important来区分处理IE和FF的网页制作者带来了不少问题，Noker也遇到了这个问题，所以翻阅网上资料，写了下面这个能够兼容现今大多数主流浏览器，覆盖绝大多数用户的Hack代码！
兼容浏览器版本：IE5.0，IE5.5，IE6.0，IE7.0，Firefox1.5，FireFox2.0
CSS代码：（请注意Hack代码的顺序）
Example Source Code
[www.52css.com]
#test{
width:300px;
height:100px;
background:#DDD!important;/*FF*/
background:#FF0;/*IE5.0*/
}
#test/*IE5.5+*/{
*+background:#C0F!important;/*IE7.0*/
*background:#F00;/*IE6.0*/
*background /*IE5.5*/:#F90;
}
width:300px;
height:100px;
background:#DDD!important;/*FF*/
background:#FF0;/*IE5.0*/
}
#test/*IE5.5+*/{
*+background:#C0F!important;/*IE7.0*/
*background:#F00;/*IE6.0*/
*background /*IE5.5*/:#F90;
}
新版div+css ie6.0、ie7.0和ff的css差别
方案一：
写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;
方案二：
#sample {background:red;}
* html #sample {backgroud:green;}
* +html #sample{backgroud:blue}
第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。
第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。
第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。
写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;
方案二：
#sample {background:red;}
* html #sample {backgroud:green;}
* +html #sample{backgroud:blue}
第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。
第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。
第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
