当前位置：首页 → 问答吧 → 100分求原因页面在ie8和ff下的表现不一致。。。。

100分求原因页面在ie8和ff下的表现不一致。。。。

时间：2011-10-17

来源：互联网

实在搞不明白了，ie8的width的数值应该和ff一样是不包括内外边距的才对，但是下面出现的问题实在不知道是咋回事。

页面就是在一个大div下有一个leftMain和rightMain。左右显示。
在leftMain中有个#status的div，这个div的左右内边距是22px，在加上自身的width：466px的话，应该恰好等于leftMain的长度510px。
问题是现在页面在ff下正常，在ie下表现变形了，leftMain过长，导致rightMain无法和leftMain在同一行显示。

下图就是期望结构和ie8下的不正常显示：

css代码如下：
CSS code


<style type="text/css">
div{border:black solid 1px;} /* for test */
#container {
    width:760px;
    margin:0 auto;
}
.pageMain{
    float: left;
    width: 700px;
    padding: 20px 30px 10px 30px;
}
#leftMain{
    width:510px;
    float: left;
}
#leftMain #status{
    color: #0089B1;
    padding: 0 22px 0 22px;
    width:466px;/* 22+466+22=510 leftMain'width */
    float: left;
}
#rightMain{
    width:170px;
    height:220px;
    float: right;
}
</style>

HTML code


<body>
<div id="container">
    <div class="pageMain">
        <div id="leftMain">
            <div id="status">
                sss
            </div>
        </div>
        <div id="rightMain">
        </div>
    </div>
</div>
</body>