在ie中为什么左右浮动的div错开啊救~解决方法
日期：2014-05-17 浏览次数：20992 次
在ie中为什么左右浮动的div错开啊~？？……急救~~
代码如下：
<style>
#container {
height: auto;
width: 955px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
body {
background-color: #000;
margin: 0px;
}
#content {
margin: 0px;
padding: 0px;
width: 955px;
height: auto;
}
#left_area {
margin: 0px;
padding: 0px;
height: auto;
width: 210px;
}
#right_area {
background-color: #D47F55;
float: right;
height: auto;
width: 745px;
margin: 0px;
padding: 0px;
}
#info {
background-color: #FFA;
margin: 0px;
height: 480px;
width: 206px;
float: left;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #EC870E;
}
</style>
<body>
<div id="container">
<div id="content" >
<div id="left_area">
<div id="info">
</div>
</div>
<div id="right_area">
</div>
</div>
</div>
</body>
这个是精简版的代码，求高手帮帮忙啊~~~~~~
------解决方案--------------------
3px BUG的一般解决方案都是针对IE写css hack
<style type="text/css">
#bugdiv {
width:100px;
margin-left:0; /*默认情况*/
*margin-left:-3px; /*IE7*/
_margin-left:-3px; /*IE6*/
}
</style>
这个例子我只是随便一写...我要说明的问题只是,如果你遇到了3pxbug的话,那么就按照上述顺序针对出现bug 的DIV写cssHack就可以
------解决方案--------------------
ie6特有的3像素bug解决方案：
_zoom:1;
margin-left: value;
_margin-left: value-3px;
zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。
margin-left: value-3px 是修复IE6 中3px 的bug。
此前采用非浮动元素也浮动的方法修复bug，现在我们可以试试这个新的方法了！
注：前面的下划线是专门写给IE7以下版本的hack！
代码如下：
<style>
#container {
height: auto;
width: 955px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
body {
background-color: #000;
margin: 0px;
}
#content {
margin: 0px;
padding: 0px;
width: 955px;
height: auto;
}
#left_area {
margin: 0px;
padding: 0px;
height: auto;
width: 210px;
}
#right_area {
background-color: #D47F55;
float: right;
height: auto;
width: 745px;
margin: 0px;
padding: 0px;
}
#info {
background-color: #FFA;
margin: 0px;
height: 480px;
width: 206px;
float: left;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #EC870E;
}
</style>
<body>
<div id="container">
<div id="content" >
<div id="left_area">
<div id="info">
</div>
</div>
<div id="right_area">
</div>
</div>
</div>
</body>
这个是精简版的代码，求高手帮帮忙啊~~~~~~
------解决方案--------------------
3px BUG的一般解决方案都是针对IE写css hack
<style type="text/css">
#bugdiv {
width:100px;
margin-left:0; /*默认情况*/
*margin-left:-3px; /*IE7*/
_margin-left:-3px; /*IE6*/
}
</style>
这个例子我只是随便一写...我要说明的问题只是,如果你遇到了3pxbug的话,那么就按照上述顺序针对出现bug 的DIV写cssHack就可以
------解决方案--------------------
ie6特有的3像素bug解决方案：
_zoom:1;
margin-left: value;
_margin-left: value-3px;
zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。
margin-left: value-3px 是修复IE6 中3px 的bug。
此前采用非浮动元素也浮动的方法修复bug，现在我们可以试试这个新的方法了！
注：前面的下划线是专门写给IE7以下版本的hack！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
