利用!important来处理margin在firefox与IE的显示差别-阿里云开发者社区

利用!important来处理margin在firefox与IE的显示差别

2017-05-28 1058

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

示例代码:
<!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;
}

分类: css, C# Asp.net

本文转自快乐就好博客园博客，原文链接：http://www.cnblogs.com/happyday56/archive/2009/02/06/1385459.html，如需转载请自行联系原作者