Question

在我网站的一个页面上，我在右栏中有一个表太宽而不是显示滚动条，IE将其包装在左栏中的内容下方。我无法找到解决方法，因为我不知道如何描述正在发生的事情。

以下是我用来演示问题的代码：

<style>
  #col1 { float: left; width:189px;  font-size:8pt;}
  #col3 { width: auto; margin: 0 0 0 191px; }
</style>             
<body>           
    <div id="col1">
            <div style="padding-top:30em;border:1px solid red">really tall</div>
    </div>
    <div id="col3">        
            <h1>title</h1>  
            <table border="1">
            <tr>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
            </tr>
        </table>
    </div>
</body>

以下是它在IE中呈现的方式：

在所有其他浏览器中，a的表格显示在“title”下面，我得到一个水平滚动条。这是我所期望的，但出于某种原因，IE想要清除col1中的内容。我已经尝试过应用宽度，浮点数等，但我不能让IE将表放在标题下而不清除col1内容。

我认为这有一些IE浏览器，但它是什么？

Answer 1

您可以在col3上设置宽度吗？如果没有，请尝试将边框调整为css，而不是html边框。同时在表格中尝试border-collapse:collapse;。如果您可以在col3上设置宽度，也可以使用overflow:hidden;。您还可以尝试在两个而不是浮点数上使用inline-block。

编辑：最后让我的解决方案在IE6中运行。它需要更改源顺序，但内容现在可以是第一个。

编辑＃2 ：我的解决方案适用于怪异IE6 / IE7 / IE8和标准IE6 / IE7 / IE8以及Fx，Chrome。

http://work.arounds.org/sandbox/67/run

Answer 2

将zoom:1添加到＃col3的css中，这将解决（它与haslayout问题有关）

http://jsfiddle.net/fcalderan/ZPztF/

P.S。这是一种魔术（cit。女王）=）

http://reference.sitepoint.com/css/haslayout

Answer 3

您是否尝试添加overflow：auto; ＃col3风格？

在IE中清除unwrappable float，但在所有其他浏览器中使用滚动条进行渲染

3 个答案: