关于网页中的兼容性问题

《网页设计师最大的痛苦:浏览器兼容性》

http://www.missyuan.com/thread-411701-1-1.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对浏览器兼容应做到完全一致吗？
个人认为在满足可读性的原则和不影响整体布局的前提下，界面有些许的位置不同是可以允许的，要在不同浏览器下做到一模一样，那真是太费劲了。

 

（二）
1.目标不居中；
一般新手都爱出现这个问题，主要原因是对盒子模型不够理解，如果发现你的页面没有居中，基本上有两种情况：
a.如果是在浏览器中没有居中，就是没盒子，就是要用一个大DIV把所有需要居中元素装起来，然后给盒子一个css样式margin:0 auto;
b.如果想要盒子内的元素居中，必须定义盒子的绝对宽度,然后给盒子一个CSS样式text-align:center;

2.目标在不同浏览器上的位置不同；
a.首先不要去急着找hack,先看一下自己的代码有没有错误，DW里有一个“检查浏览器兼容性”功能特别实用；
b.然后，尽量让目标的位置初始化，使之在所有浏览器都处在同一个位置，这个条件的前提是，不写hack，最后再一个方位一个方位调整。

3.目标与目标之间距离在各个浏览器上的区别；
a.给其中一个目标加背景颜色；
b.观察背景色与另外一个目标的距离，查看是不是这个目标造成的距离问题
c.如果不是上一个目标，那就给另外一个目标也加上背景颜色。
d.这样很容易判断出那个目标造成的原因，就针对那个目标进行修改。

4.IE6兼容问题最多的一个，浮动问题。
a.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，解决方法：
只需要给这个DIV加一个样式：display:inline;
b.布局的时候经常会遇到这种情况：发现有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现。
解决的办法：清除浮动，在设置过浮动的那个DIV下面加一个DIV，给个样式clear:both;如下
<div style="float:left;height:100px; width:500px;"> <div style="clear:both;"> <div style="height:100px; width=300px">

5.IE8兼容问题
ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" />

6.背景兼容问题
有的时候明明给一个DIV加了背景颜色或背景图片，但是却显示不出来或者显示不全。
解决办法：首先，有可能是DIV没有设置绝对高度。如果设置了宽度和高度还没有效果，那么给DIV一个样式display:block；（通常a:hover加背景的时候经常遇到）。
另外，如果高度必须要设置成自动的话，那么就给DIV一个样式overflow:hidden;

7.IE7和Firefox兼容问题
很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好使，就是FF下有问题。
解决方法：height:100px;/*FF下显示100的高*/ +height:120px;/*IE678下显示120高*/
原理：FF不识别加过符号的属性，而IE识别。