CSS 在不同浏览器的兼容性问题大集合

CSS

在不同浏览器的兼容性问题

一、

为什么会出现兼容性问题

所谓的浏览器兼容性问题，
是指因为不同的浏览器对同一段代码有不同的解析，
造成页
面显示效果不统一的情况。
在大多数情况下，
用户用什么浏览器来查看同一网站，
都应该是
统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问
题。

浏览器兼容问题一
：不同浏览器的标签默认的外边框和内边框不同

问题症状：

随便写几个标签，不加样式控制的情况下，各自的
margin
和
padding
差异
较大。

碰到频率
: 100%
解决方案：

css
里

*{margin:0;padding:0;}
备注：

这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的
css
文件
开头都会用通配符
*
来设置各个标签的内外边框是
0
。

浏览器兼容问题二
：
块属性标签
float
后，
又有横行的
margin
情况下，
在
IE6
显示
margin
比设置的大

问题症状
:
常见症状是
IE6
中后面的一块被顶到下一行

碰到频率：

90%
（稍微复杂点的页面都会碰到，
float
布局最常见的浏览器兼容问题）

解决方案：

在
float
的标签样式控制中加入

display:inline;
将其转化为行内属性

备注：

我们最常用的就是
div+css
布局了，而
div
就是一个典型的块属性标签，横向布
局的时候我们通常都是用
div
float
实现的，横向的间距设置如果用
margin
实现，这就是一
个必然会碰到的兼容性问题。

浏览器兼容问题三
：设置较小高度标签（一般小于
10px
）
，在
IE6
，
IE7
，遨游中高度超
出自己设置高度

问题症状：

IE6
、
7
和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：

60%
解决方案：

给超出高度的标签设置
overflow:hidden;
或者设置行高
line-height
小于你设
置的高度。

备注：

这种情况一般出现在我们设置小圆角背景的标签里。
出现这个问题的原因是
IE8
之前的浏览器都会给标签一个最小默认的行高的高度。
即使你的标签是空的，
这个标签的高
度还是会达到默认的行高。

浏览器兼容问题四
：行内属性标签，设置
display:block
后采用
float
布局，又有横行的
margin
的情况，
IE6
间距
bug
（类似第二种）

问题症状：

IE6
里的间距比超过设置的间距

碰到几率：

20%
解决方案：

在
display:block;
后面加入
display:inline;display:table;
备注：

行内属性标签，为了设置宽高，我们需要设置
display:block;(
除了

input
标签比
较特殊
)
。在用
float
布局并有横向的
margin
后，在
IE6
下，他就具有了块属性
float
后的横
向
margin
的
bug
。不过因为它本身就是行内属性标签，所以我们再加上
display:inline
的话，
它的高宽就不可设了。这时候我们还需要在
display:inline
后面加入
display:talbe
。

浏览器兼容问题五
：图片默认有间距

问题症状：

几个
img
标签放在一起的时候，有些浏览器会有默认的间距，加了问题一
中提到的通配符也不起作用。

碰到几率

：
20%
解决方案：

使用
float
属性为
img
布局

备注：

因为
img
标签是行内属性标签，所以只要不超出容器宽度，
img
标签都会排在
一行里，但是部分浏览器的
img
标签之间会有个间距。去掉这个间距使用
float
是正道。
（使
用负
margin
，虽然能解决，但负
margin
本身就是容易引起浏览器兼容问题的用法，所以不
建议使用）

浏览器兼容问题六
：标签最低高度设置
min-height
不兼容

问题症状：

因为
min-height
本身就是一个不兼容的
css
属性，
所以设置
min-height
时不
能很好的被各个浏览器兼容

碰到几率

：
5%
解决方案：

如果我们要设置一个标签的最小高度
200px
，需要进行的设置为：
{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：

在
B/S
系统前端开时，

有很多情况下我们又这种需求。
当内容小于一个值（如
300px
）时。容器的高度为
300px
；当内容高度大于这个值时，容器高度被撑高，而不是出
现滚动条。这时候我们就会面临这个兼容性问题。

二、

如何应对兼容性问题

做兼容页面的方法是：
每写一小段代码
（布局中的一行或者一块）
我们都要在不同的浏
览器中看是否兼容，
当然熟练到一定的程度就没这么麻烦了。
建议经常会碰到兼容性问题的
新手使用。
很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，
只要我们稍
加设置都能轻松地解决这些兼容问题。
如果我们熟悉标签的默认属性的话，
就能很好的理解
为什么会出现兼容问题以及怎么去解决这些兼容问题

1.

css hack
技术

css hack
技术是通过一些浏览器特殊支持或者不支持的语句，确定一个
css
样式能给被
浏览器解析或者不能被浏览器解析。
css

hack
技术针对不同浏览器的差异进行利用和设计，
使用它可以在最大限度的让所以的浏览器下显示同样的风格和模式。

css hack
技术是一种改善
CSS
在不同浏览器下的表现形式的技巧与方法。

CSS hack
技
术是通过一些浏览器特殊或者不支持的语句，使一个
CSS
样式能够被浏览器解析或者不能
解析的方法实现的。

CSS
Hack
的原理只有两条：
兼容性
和
顺序
。就是利用书写顺序和不同浏览器对一些特
定书写方法的解析方式不同而达到不同的效果。不管是什么方法，书写的顺序都是
firefox
的写在前面，
IE7
的写在中间，
IE6
的写在最后面。
（其顺序正好是对
CSS2.0
标准执行的好
坏程度）

可把浏览器分为
3
类：
IE6
；
IE7
和遨游；其他（
IE8 chrome ff safari opera
等）
。
IE6
认
识的
hacker
是下划线
_
和星号

*
；
IE7
和遨游只认识的
hacker
是星号

*
；而其他浏览器下

划线
_
和星号
*
都不认识。

比如有这样一个
css
样式设置

#exam{
height:300px;

*height:200px;
_height:100px;
}
IE6
浏览器在读到

height:300px
的时候会认为高度是
300px
；继续往下读，他也认识
*heihgt
，所以当
IE6
读到
*height:200px
的时候会覆盖掉前一条的相冲突设置，认为高度是
200px
。继续往下读，
IE6
还认识
_height
，所以他又会覆盖掉
200px
高的设置，把高度设置
为
100px
；
IE7
和遨游也是一样的从高度
300px
的设置往下读。当它们读到
*height200px
的
时候就停下了，因为它们不认识
_height
。所以它们会把高度解析为
200px
；剩下的浏览器只
认识第一个
height:300px;
所以他们会把高度解析为
300px
。因为优先级相同且相冲突的属性
设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

DIV
＋
CSS
网页布局这是一种趋势，
不过在使用
DIV
＋
CSS
网站设计的时候，
应该注意
css
样式兼容不同浏览器问题，
特别是对完全使用
DIV+CSS
设计的网页，
就应该更注意
IE6
、

IE7
和
FF
对
CSS
样式的兼容。

什么是浏览器兼容：当我们使用不同的浏览器（
Firefox
、
IE7
、
IE6
）访问同一个网站，
或者页面的时候，
会出现一些不兼容的问题，
在这种浏览器下显示正常，
在另一种下就乱了，
目前解决这个浏览器的问题，最直接的方法就是利用
CSS
hack
技术为每个浏览器各写一段
css
，
让它们各执行各的，
这就是
CSS hack
技术解决
CSS
在不同浏览器中的兼容性问题的核
心。

2.

!important

!important
是被
Firefox
浏览器所支持的一种用于确定优先级的技术。
随着
IE7
对
!important
的支持，

!important
方法现在只针对
IE6
的兼容性问题。注意：
!important
也
算是
hack
的一种。不过实用性较小。

例如
:
#example {

width: 100px !important; /* IE7+FF */

width: 200px; /* IE6 */

}

三、

CSS HACK
的常用方法

首先需要知道的是：

所有浏览器

通用

height: 100px;

IE6
专用

_height: 100px;

IE7
专用

*+height: 100px;
IE6
、
IE7
共用

*height: 100px;
IE7
、
FF
共用

height: 100px !important;

例如：

#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
/*
注意：这个范例中区别符号在样式名前面，并且加了
html*/

下面的这种方法比较简单

举几个例子：

1
、
IE6 - IE7+FF
（
-
为区别，
+
为共同）

#example {

height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以

#example {

height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2
、
IE6+IE7 - FF
#example {

height:100px; /* FF */
*height:200px; /* IE6+IE7

IE7
的后一次应用将第一次覆盖了
*/
}

3
、
IE6+FF - IE7
#example {

height:100px; /* IE6+FF

但两者效果可能不同
*/
*+height:200px; /* IE7 */
}

4
、
IE6 IE7 FF
各不相同

#example {

height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：

#example {

height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释
程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我
们把通用的放前面，越专用的越放后面。

解释一下
4
的代码：读代码的时候，第一行
height:100px;
大家都通用，
IE6
IE7
FF
都
显示
100px
。到了第二行
*height:300px; FF
不认识这个属性，
IE6 IE7
都认，所以
FF
还显示

100px
，而
IE6
IE7
把第一行得到的
height
属性给覆盖了，都显示
300px
。到了第三行
_height:200px;
只有
IE6
认识，
所以
IE6
就又覆盖了在第二行得到的
height
，
最终显示
200px
。
这样，三个浏览器都有自己的
height
属性了。

需要说明的是：
*+html
对
IE7
的兼容

必须保证
HTML
顶部有如下声明：

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"

" http://www.w3.org/TR/html4/loose.dtd ">

四、

使用
IE
专用的条件注释

条件注释是
IE
特有的一种功能，能对
IE
系列产品进行单独的
XHTML
代码处理，注意，主要
是针对
XHTML,
而非
CSS
。

条件注释能被
IE
判断是什么版本的浏览器，
并在符合条件的情况下显示其中的内容，
从
IE5.0
到
7.0
都支持注释功能，而且版本号精确到小数点后
4
位。

如：
<!--[if IE 6.0]>
此内容只有
IE6.0
可见
<![endif]-->

IE
条件注释还支持感叹号非操作：

如：
<!--[if !IE 6.0]>
此内容除了
IE6.0
版本之外都可见
<![endif]-->

<!--
其他浏览器

-->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!--
适合于
IE7 -->
<link rel="stylesheet" type="text/css" href="IE7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!--
适合于
IE6
及以下

-->
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->

IE
的
if
条件
Hack

1. <!--[if

!IE]><!-->
除
IE
外都可识别

<!--<![endif]-->
2. <!--[if

IE]>
所有的
IE
可识别

<![endif]-->
3. <!--[if

IE 5.0]>
只有
IE5.0
可以识别

<![endif]-->
4. <!--[if

IE 5]>
仅
IE5.0
与
IE5.5
可以识别

<![endif]-->
5. <!--[if

gt

IE 5.0]> IE5.0
以上版本都可以识别

<![endif]-->
6. <!--[if

IE 6]>
仅
IE6
可识别

<![endif]-->
7. <!--[if

lt

IE 6]> IE6
以及
IE6
以下版本可识别

<![endif]-->
8. <!--[if

gte

IE 6]> IE6
以及
IE6
以上版本可识别

<![endif]-->
9. <!--[if

IE 7]>
仅
IE7
可识别

<![endif]-->
10. <!--[if

lt

IE 7]> IE7
以及
IE7
以下版本可识别

<![endif]-->
11. <!--[if

gte

IE 7]> IE7
以及
IE7
以上版本可识别

<![endif]-->

注
:

gt = Great Then
大于