可展开的浮动在 IE 中被清除，但在所有其他浏览器中以滚动条呈现

发布于 2024-10-03 13:33:01 字数 1751 浏览 1 评论 0原文

在我网站的一个页面上，右列中有一个表格太宽，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 的表格显示在“标题”下方，并且我得到一个水平滚动条。这是我所期望的，但由于某种原因，IE 想清除 col1 中的内容。我尝试过应用宽度、浮动等，但我无法让 IE 在不清除 col1 内容的情况下将表格放在标题下方。

我猜想有一些 IE hack 可以解决这个问题，但它是什么？

原文

On one page on my site, I have a table in the right column that is too wide and rather than showing scrollbars, IE is wrapping it below the content in the left column. I can't find a fix for this because I don't know how to describe what's happening.

Here's the code I'm using to demonstrate the problem:

<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>

And here's how it renders in IE:

In all other browsers, the table of a's shows just under "title" and I get a horizontal scrollbar. This is what I'd expect, but for some reason, IE wants to clear the content in col1. I've tried applying widths, floats, etc, but I can't get IE to put the table under the title without clearing the col1 content.

I assume there's some IE hack for this, but what is it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一杯敬自由 2024-10-10 13:33:01

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

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

ps 这是一种魔法（引用女王）=)

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

回复收藏 0 原文

只是我以为 2024-10-10 13:33:01

您可以设置 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