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

最新推荐文章于 2022-11-29 17:39:44 发布

林尧彬

最新推荐文章于 2022-11-29 17:39:44 发布

阅读量52

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/happyday56/archive/2009/02/06/1385459.html

版权

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

转载于:https://www.cnblogs.com/happyday56/archive/2009/02/06/1385459.html

林尧彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用!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...
复制链接

扫一扫