ie6下不兼容，大家帮忙分析下原因,该怎么解决
日期：2014-05-17 浏览次数：20809 次
ie6下不兼容，大家帮忙分析下原因
大体的框架是这样的，我给main设置了960px;里面的三个div的宽度加起来正好等于960px。firefox chrom ie9等都能正常显示，但是在ie6下，right那个div会被挤下去，为什么呢？
------解决方案--------------------
因为 在IE下 边框是要算宽度的 浮动元素有可能还要加倍他的宽度 所以不能设置3个DIV等于960
------解决方案--------------------
IE6浏览器对浮动元素有个双倍margin值BUG，解决方法是将这三个浮动元素设置display:inline;样式：
- HTML code
<div class="main">
<div class="leftbar"></div>
<div class="middle"></div>
<div class="rightbar"></div>
</div>
大体的框架是这样的，我给main设置了960px;里面的三个div的宽度加起来正好等于960px。firefox chrom ie9等都能正常显示，但是在ie6下，right那个div会被挤下去，为什么呢？
- CSS code
.main{
margin-top: 5px;
width:960px;
margin:5px auto;
padding:0px;
}
.main .leftbar{
width:235px;
float:left;
margin-left: 5px;
overflow: hidden;
}
.main .middle{
width:450px;
float:left;
margin-left:15px;
margin-right:15px;
background-color: #F2F2F2;
overflow: hidden;
}
.main .rightbar{
float:right;
width:230px;
margin-right:5px;
overflow: hidden;
}
------解决方案--------------------
因为 在IE下 边框是要算宽度的 浮动元素有可能还要加倍他的宽度 所以不能设置3个DIV等于960
------解决方案--------------------
IE6浏览器对浮动元素有个双倍margin值BUG，解决方法是将这三个浮动元素设置display:inline;样式：
- CSS code
.leftbar, .middle, .rightbar { display:inline; }
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
