FF/IE不支持Margin: -1px，这个效果如何实现
日期：2014-05-17 浏览次数：21038 次
FF/IE不支持Margin: -1px，这个效果怎么实现。
如果要做这样的效果怎么办？
active的li的border-bottom是白色（看不见了），
全屏的1px border black位于header和main之间。
不管定义这个1px border black是header的bottom还是main的top，总是不能让两个border重合。
而-1px在Chrome中有效，在IE/FF中都没有效果。
------解决方案--------------------
这样即可，ie8,ff9、opera下都是正常的
如果要做这样的效果怎么办？
active的li的border-bottom是白色（看不见了），
全屏的1px border black位于header和main之间。
不管定义这个1px border black是header的bottom还是main的top，总是不能让两个border重合。
而-1px在Chrome中有效，在IE/FF中都没有效果。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1px border </title>
<style type="text/css" >
#header {
padding:15px 15px 0 15px;
background: #eee;
}
#header ul {
list-style: none;
margin:0;
padding:0;
}
#header li {
float: left;
border: 1px solid #000;
padding: 15px;
margin-right: 5px;
background: #fff;
}
.fixnone, .clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#header li.active{
border-bottom:1px solid #fff;
}
#main {
padding:15px;
clear: both;
border-top: 1px solid #000;
margin-top: -1px;
background: #fff;
}
</style>
</head>
<body>
<div id="header" class="clearfix">
<ul>
<li class="active">Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<div style="clear:both"></div>
</div>
<div id="main">
Main here!
</div>
</body>
</html>
------解决方案--------------------
这样即可，ie8,ff9、opera下都是正常的
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1px border </title>
<style type="text/css" >
#header {
padding:15px 15px 0 15px;
background: #eee;
}
#header ul {
list-style: none;
margin:0;
padding:0;
position:relative;
}
#header li {
float: left;
border: 1px solid #000;
padding: 15px;
margin-right: 5px;
background: #fff;
}
.fixnone, .clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#header li.active{
border-bottom:1px solid #fff;
}
#main {
padding:15px;
border-top: 1px solid #000;
margin-top: -1px;
background: #fff;
}
</style>
</head>
<body>
<div id="header" class="clearfix">
<ul>
<li class="active">Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<div style="clear:both"></div></div>
<div id="main">
Main here!
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
