CSS各个浏览器兼容问题

buliangniu

浏览: 90048 次
性别:
来自: 北京

最近访客更多访客>>

zhengshujunyx

etracer

明少

lijunxian0114

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML/CSS

浏览器 CSS IE Firefox Opera

为了让各浏览器有同样的显示效果，就不能不对CSS做兼容性处理，这时我们就会用到CSS HACK。当然在这篇文章中我们只谈现在使用率最高的IE6、IE7、IE8和FF，至于IE6以下版本已OP、SF在这此先不详细说明。新手看了这片文章一定会有所收获，而高手们路过一下就可以了

1、可进行浏览器兼容性重复定义

首先来看一下示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个CSS兼容性问题的示例</title>
<style type="text/css">
.test{
width:500px;
height:200px;
background-color:orange; /*IE6、IE7、IE8和FF支持*/
*background-color:blue;  /*IE7支持*/
_background-color:red;   /*IE6支持*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

在看看效果：

这是在IE6中的效果

这是在IE7中的效果

这是在IE8和FF中的效果

为什么会这样呢？我解释一下，首先background-color:orange;IE6、IE7、IE8和FF都支持，但是由于程序运行时按照顺序执行，后面设置的属性会覆盖前面的属性，后面两个*background-color:blue; 和_background-color:red;可是IE6不支持“*”号只支持“-”号，所以IE6最终读取的_background-color:red;。

同样的道理，IE7能够识别“*”号，但是不能识别“-”号，所以在IE7下运行的效果是*background-color:blue;IE8和FF“*”号和“-”号都不能识别所以最终读取为background-color:orange;

2、几个浏览器对实际像素的解释

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)

Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

3、鼠标手势问题

FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

4、单位的问题

FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位

5、消除ul、ol等列表的缩进

消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

6、超链接的CSS样式设置

对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即

这样可以避免一些访问过后的超链接就不具备hover和active样式了

7、浮动后IE6解释外边距为实际边距的双倍

解决办法：加上display:inline

8、自动撑开

支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：

{

height:auto!important;

height:200px;

min-height:200px;

}

9、IE6由于默认行高问题无法定义1px左右高度的容器

解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

分享到：

一健生成全国省和城市数据库表 | JavaScript 循环语句

2009-11-14 20:14
浏览 1035
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论