Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，它们会扩展为 100% 宽度。有解决方法吗？

Posted 2023-03-06

技术标签:

【中文标题】Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，它们会扩展为 100% 宽度。有解决方法吗？【英文标题】：Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround? 【发布时间】：2010-10-25 12:35:38 【问题描述】：

我有一个父 div 向左浮动，有两个孩子 divs 我需要向右浮动。

父 div 应该（如果我正确理解规范）尽可能宽以包含子 divs，这就是它在 Firefox 等中的行为方式。

在 IE 中，父级 div 扩展为 100% 宽度。这似乎是具有子项向右浮动的浮动元素的问题。测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

不幸的是我无法固定子divs的宽度，所以我无法在父上设置固定宽度。

是否有一种仅使用 CSS 的解决方法来使父 div 与子 divs 一样宽？

【问题讨论】：

这是一个很好的例子来说明问题所在：css-class.com/test/css/visformatting/floats/… 哦，是的，很好的测试页。 【参考方案1】：

我无法提出符合您要求的纯 CSS 解决方案，但如果您想使用 javascript 解决方案，也许以下代码可以提供帮助？我没有改变 div 的样式，我只是将 ID main、sub1 和 sub2 添加到您的 div 中。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;

【讨论】：

当然，这在 JavaScript 方面应该可以工作——不过，如果我沿着 JavaScript 路线走，我可能会检查 Dean Edwards 的 IE7 脚本是否修复了这个特定问题（它修复了许多其他问题)。【参考方案2】：

使用单单元格表格代替外部 div 怎么样？可能需要做更多的工作才能使所有内容正确对齐，但表格不会展开。

【讨论】：

不幸的是，表格似乎强制子 div 换行，因此它们彼此上方而不是并排。好的，嵌套表怎么样？外部表有 float:left 和一个单元格。在那个单元格中有一个带有 float:right 和两个单元格的内表。在两个单元格中的每一个中都是两个内部 div 的内容。它不仅涉及 div，而且还有效（至少在我的 XP/IE7 上）。啊，用表格实现子div的横向布局。绝对有可能，尽管从技术上讲，您并不打算使用表格进行布局（我认为如果您这样做，您将无法通过 Web 内容可访问性指南）。此外，这实际上适用于具有两种布局的网站：一种从左到右，一种从右到左。理想情况下，我们不想修改布局的 HTML（除了有一个指示正在使用哪个布局的类之外），使用表格可以结束这种情况。【参考方案3】：

你可以从以下开始：

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

这样做的结果似乎至少在您正在寻找的范围内。显然，您希望根据需要对其进行调整，并且可能添加一些 css 逻辑以仅将其应用于浏览器

如果这不是您想要的，请尝试使用一些负边距。

【讨论】：

不幸的是，这在我的测试页面上似乎不起作用：子 div 换行，因此它们彼此上方而不是并排。此外，至少在 IE 7 中，100% 的边距占据了所有可用空间，因此父 div 位于其父 div 之外。有时 IE 6 无法正常听到，除非您大声喊叫。哇，我什至不记得在看到这条新评论之前回答过这个问题！我不记得为什么这些都是大写的，但我认为保罗明白了它的要点:)【参考方案4】：

首先，你为什么不使用内联样式？

我会用它来用一个单独的 css 文件来定位 IE：

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

我知道这不是一个直接的问题，但处理 IE 总是很痛苦！我认识的大多数设计师/开发人员都会为 IE 制作全新的样式表。

【讨论】：

是的，很抱歉：上面的代码只是为了突出显示错误的示例代码。我使用了内联样式，以便更轻松地查看正在发生的事情。【参考方案5】：

我想出了一个使用text-align: right 和display: inline 的解决方案。

试试这个：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="margin-top: 10px; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
        <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
    </div>
</div>

请注意，我必须切换标记中“测试人员”框的顺序，才能以与您的示例相同的方式显示。我认为在新容器上还有一个margin-top 替代方案，但我现在没有时间研究。

如果您希望所有其他浏览器的样式更简洁，请尝试以下操作：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="float: right;">
        <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
        <div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
    </div>
</div>

当您想要围绕这些框布置内容时，可能会出现一些不同的问题。不过，我认为这些问题会比这个更容易解决。

希望这对您有所帮助。

【讨论】：

您可能希望使用inline-block 而不是inline。 @meo：不，它没有，但可以通过一些警告来模拟：foohack.com/2007/11/… 好东西。订购的东西是不幸的，但没有办法解决这个问题。下面有一个解决方案，它可以在 IE 7 和 6 中使用 inline-block，它可以更好地模仿浮动的原始版本，但这里也需要感谢。 inline-block 是一个奇怪的例外：你可以让它在 IE 6 中运行，但不能在 Firefox 2 中运行。【参考方案6】：

一个非常 hacky 但仅适用于 IE、chrome 和 FF 的 CSS 解决方案。我采用了 kaba 的解决方案 - 但问题是，它在 IE 中运行良好，但所有其他浏览器在 2 个子 div 之间显示 4px 空间。即使两个 div 上的内容都展开，该空间仍保持为 4px。所以为了解决这个问题，我使用了 IE 条件语句。我看起来不像世界上最好的代码，但它可以完成工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0; float: left;">

    <div style="border-top:solid 10px #00c; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>

        <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">

        <!--[if gte IE 5]>
        <div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
        <![endif]-->

         Tester1

        <!--[if gte IE 5]>
        </div>
        <![endif]-->


        </div>

    </div>
</div>
</body>
</html>

【讨论】：

我知道你要去哪里；我想我更喜欢 IE 的 inline-block 解决方案，因为它可以处理间距问题而无需负边距。【参考方案7】：

这是一个解决方案，它使 inline-block 在 IE6 上与 http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 一样工作，以使元素的行为更像是右浮动 <div>s：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<title>Float with inline-block test</title>

<style type="text/css">
    .container 
        border-top: solid 10px green;
        float: left;
    

    .tester1,
    .tester2 
        float: right;
    

    .tester1 
        border-top: solid 10px blue;
    

    .tester2 
        border-top: solid 10px purple;
    
</style>

<!--[if lte IE 7]>
<style type="text/css">
    .container 
        text-align: right;
    

    .tester1,
    .tester2 
        float: none;
        zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
    
</style>
<![endif]-->

</head>

<body>
<div class="container">
    <div class="tester1">Tester 1</div>
    <div class="tester2">Tester 2</div>
</div>
</body>
</html>

【讨论】：

啊哈！是的，非常好的主意：inline-block 是对花车的更接近的模仿。我们仍然存在排序问题，但除非我们遗漏了什么，否则没有非 JavaScript 方法可以解决这个问题。赢家！哦 — 我还使用条件 cmets，以便修复 IE 7 和 6 的代码仅适用于 IE 7 和 6。我已相应地重写了您的示例。这避免了 Firefox 2 中 inline-block 的问题，并且意味着 7 之后的所有 IE 都会获得正确的基于 float 的代码。很公平 - 我尝试将 float: right 添加到测试 DIV 并将 inline-block 添加到容器，但这在 IE6 中不起作用 - 似乎右浮动使元素 100% 宽度不有什么关系。哦，好吧，至少效果是可能的：-P【参考方案8】：

我遇到了同样的问题，并通过使用 position:absolute 和 right:0 定位子元素（我想向右浮动）来解决。我为父元素提供了足够的右填充来为子元素腾出空间...值得一试，可能不适用于所有应用程序！

【讨论】：

当然，这是另一种解决方法。如果您知道子元素的宽度，则效果很好。

以上是关于Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，它们会扩展为 100% 宽度。有解决方法吗？的主要内容，如果未能解决你的问题，请参考以下文章

PHP：如果 Internet Explorer 6、7、8 或 9

内联块在 Internet Explorer 7、6 中不起作用

需要一个好的 Internet Explorer 6、7、8 独立版 [重复]

Internet Explorer z-index 错误？

背景颜色和斜体引起 Internet Explorer 7 错误

CodeIgniter:重定向Internet Explorer访问者