Question

我有以下HTML代码

<div align="center" style="width:1000px;border:1px solid green;">
        <div style="border:1px solid red;float:left; width:200px;  ">
        ssssssssssss </div>    
        <div style="border:1px solid red;float:left; width:200px;  ">
        ssssssssssss </div>
    <div style="border:1px solid black;  overflow: hidden;" id="endText">       
        xxx<p>&nbsp;</p><p>&nbsp;</p><p>x</p>           
    </div>
<div style="clear:both"></div>
</div>

它在FF，Opera，Safari，Chrome中运行得非常好，但在IE中显示错误的东西。 IE请求endText div的预定义高度，例如

<div style="border:1px solid black;  overflow: hidden;height:117px; " id="endText">

有什么问题？与其他浏览器一样，哪些附加CSS代码可以在IE中保留其可视属性？

Answer 1

尝试向右浮动#endText并指定宽度？下面我使用了594px，因为边框正在增加宽度。

<div align="center" style="width:1000px;border:1px solid green;">
    <div style="border:1px solid red;float:left; width:200px;">
        ssssssssssss
    </div>    
    <div style="border:1px solid red;float:left; width:200px;">
        ssssssssssss
    </div>
    <div style="border:1px solid black;  overflow: hidden; float: right; width: 594px" id="endText">       
    xxx<p>&nbsp;</p><p>&nbsp;</p><p>x</p>           
    </div>
    <div style="clear:both"></div>
</div>

Answer 2

你是正确的。请在代码后添加任何标记，并将#endText高度设置为100％。它可以像其他浏览器一样工作。

<div align="center" style="width:1000px;border:1px solid green;">
    <div style="border:1px solid red;float:left; width:200px; ">
        ssssssssssss </div>
    <div style="border:1px solid red;float:left; width:200px; ">
        ssssssssssss </div>
    <div style="border:1px solid black; height:100%" id="endText">
        xxx<p>&nbsp;</p><p>&nbsp;</p><p>x</p>
    </div>
    <div style="clear:both"></div>
</div> <hr>

Answer 3

尝试在CSS中使用定位检查w3schools如何使div重叠，修复等

在IE中并排divs

3 个答案: