利用!important来处理margin在firefox与IE的显示差别
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style>
body{font:"宋体" ; font-size:12px; text-align:center; margin:0px; padding:0px;}
a{ color: #003399; font-size:12px; text-decoration:none}
a:hover{color:#0099FF; font-size:12px; text-decoration:none}
#topBar{ width:990px; height:110px; background:url(../images/topBar.gif) no-repeat; border:solid 1px #A3BFE7; margin:5px auto auto auto;}
#topMenu{ width:721px; height:15px; margin:84px 5px 0px 0px; float:right; padding:5px; border:solid 1px #A3BFE7; overflow:hidden; border-bottom:0px; background:url(../images/MenuBg.jpg);clear:both;}
#topMenu ul{margin:0px -15px 0px -40px !important; margin:0px -15px 0px 0px ; list-style:none; height:15px; clear:both;}
#topMenu ul li{float:left;width:90px; border-right:solid 1px #2E4690; line-height:15px;display: inline;}
</style>
</head>
<body>
<!--顶部开始-->
<div id="topBar">
<div id="topMenu">
<ul>
<li>首页</li>
<li>产品介绍</li>
<li>相关下载</li>
<li>服务支持</li>
<li>招贤纳士</li>
<li>公司资源</li>
<li>论坛交流</li>
<li>联系我们</li>
</ul>
</div>
</div>
<!--顶部结束-->
</body>
</html>
大家应该注意到上边这个例子里的#topMenu ul 用了两次margin也是很多人所说的双margin解决方法,这样做是有原因的，因为这样做的目的就是为了让页面在IE和firefox里显示都正确。这里边就用了!important在IE和firefox里的作用不同的bug.
大家可以试着去掉!imortant和其中的一个margin来看看在IE和firefox里的区别。
注：important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，语法格式{ sRule!important }，即写在定义的最后面，比如{font-color: red !important;}，由于IE6并不支持该语法（IE6只是在确定ID和class之间的优先级中起到作用），所以我们可以利用这一点解决部分CSS的浏览器兼容问题，这样Firefox仍然使用前一部分的margin定义，而IE则使用后一部分margin定义，立即试用，果然在IE下浏览正常了。[/color][/color][b]目前新推出的IE7又可以识别!important了，所以想让IE7，IE6，FF都来适应，这又是一个问题。下面我通过更改下面样式就可以让IE7，IE6，FF都来适应。
原来样式
#topMenu ul {
margin:0px -15px 0px -40px !important;
margin:0px -15px 0px 0px ;
list-style:none;
height:15px;
clear:both;
}
更改后的样式
#topMenu ul{
margin:0px -15px 0px -40px !important;
/*for IE7*/
> margin:0px -15px 0px 0px !important;
/*for IE6*/
margin:0px -15px 0px 0px ;
list-style:none;
height:15px;
clear:both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style>
body{font:"宋体" ; font-size:12px; text-align:center; margin:0px; padding:0px;}
a{ color: #003399; font-size:12px; text-decoration:none}
a:hover{color:#0099FF; font-size:12px; text-decoration:none}
#topBar{ width:990px; height:110px; background:url(../images/topBar.gif) no-repeat; border:solid 1px #A3BFE7; margin:5px auto auto auto;}
#topMenu{ width:721px; height:15px; margin:84px 5px 0px 0px; float:right; padding:5px; border:solid 1px #A3BFE7; overflow:hidden; border-bottom:0px; background:url(../images/MenuBg.jpg);clear:both;}
#topMenu ul{margin:0px -15px 0px -40px !important; margin:0px -15px 0px 0px ; list-style:none; height:15px; clear:both;}
#topMenu ul li{float:left;width:90px; border-right:solid 1px #2E4690; line-height:15px;display: inline;}
</style>
</head>
<body>
<!--顶部开始-->
<div id="topBar">
<div id="topMenu">
<ul>
<li>首页</li>
<li>产品介绍</li>
<li>相关下载</li>
<li>服务支持</li>
<li>招贤纳士</li>
<li>公司资源</li>
<li>论坛交流</li>
<li>联系我们</li>
</ul>
</div>
</div>
<!--顶部结束-->
</body>
</html>
大家应该注意到上边这个例子里的#topMenu ul 用了两次margin也是很多人所说的双margin解决方法,这样做是有原因的，因为这样做的目的就是为了让页面在IE和firefox里显示都正确。这里边就用了!important在IE和firefox里的作用不同的bug.
大家可以试着去掉!imortant和其中的一个margin来看看在IE和firefox里的区别。
注：important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，语法格式{ sRule!important }，即写在定义的最后面，比如{font-color: red !important;}，由于IE6并不支持该语法（IE6只是在确定ID和class之间的优先级中起到作用），所以我们可以利用这一点解决部分CSS的浏览器兼容问题，这样Firefox仍然使用前一部分的margin定义，而IE则使用后一部分margin定义，立即试用，果然在IE下浏览正常了。[/color][/color][b]目前新推出的IE7又可以识别!important了，所以想让IE7，IE6，FF都来适应，这又是一个问题。下面我通过更改下面样式就可以让IE7，IE6，FF都来适应。
原来样式
#topMenu ul {
margin:0px -15px 0px -40px !important;
margin:0px -15px 0px 0px ;
list-style:none;
height:15px;
clear:both;
}
更改后的样式
#topMenu ul{
margin:0px -15px 0px -40px !important;
/*for IE7*/
> margin:0px -15px 0px 0px !important;
/*for IE6*/
margin:0px -15px 0px 0px ;
list-style:none;
height:15px;
clear:both;
}
