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

时间:2010-11-19 16:26:41

标签: css internet-explorer css-float

在我网站的一个页面上,我在右栏中有一个表太宽而不是显示滚动条,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浏览器,但它是什么?

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

zoom:1添加到#col3的css中,这将解决(它与haslayout问题有关)

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

P.S。这是一种魔术(cit。女王)=)

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

答案 2 :(得分:0)

您是否尝试添加overflow:auto; #col3风格?