关于网页中的兼容性问题
《网页设计师最大的痛苦:浏览器兼容性》
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识别。