代码之家 › 专栏 › 技术社区 › Paul D. Waite

Internet Explorer 6和7:当浮动元素包含向右浮动的子元素时,它们将扩展到100%宽度。有解决办法吗?

css-float internet-explorer css

Paul D. Waite · 技术社区 · 16 年前

我有一个父母 div 带着两个孩子向左飘 div 那就是我需要向右浮动。

父母 (如果我正确理解了规范)是否应该尽可能宽以容纳子级 div s、这就是它在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>

不幸的是,我不能调整孩子的宽度 div s、因此,我无法在父对象上设置固定宽度。

是否有一个CSS唯一的解决办法,使家长像孩子一样宽 div

8 回复 | 直到 13 年前

Paul D. Waite 15 年前

这里有一个解决方案 inline-block 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>

Paul D. Waite 15 年前

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

注意,我必须切换标记中“tester”框的顺序,以与您的示例相同的方式显示。我认为有一种替代方案可以在新的容器上增加页边,但我现在没有时间研究。

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

当你想在这些盒子周围布置东西时,可能会出现一些不同的问题。然而,我认为这些问题将比这个问题更容易解决。

希望这对你有帮助。

Daan 16 年前

我无法提出一个只支持CSS的解决方案来满足您的需求,但是如果您想使用JavaScript解决方案,下面的代码可能会有所帮助?我没有改变div的样式,我只是添加了id main , sub1 和 sub2 去你的部门。

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

evilunix 13 年前

我也遇到了同样的问题,在中通过将子元素(我想向右浮动)定位为position:absolute和right:0解决了这个问题。我给了父元素足够的正确填充,以便为子元素腾出空间。。。值得一试,可能不适用于所有应用程序!

Oren Shalev 16 年前

使用单单元格表而不是外部div怎么样?要使所有内容正确对齐,可能需要做更多的工作,但表无法展开。

Josh E 16 年前

<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逻辑,以便仅将其应用于浏览器<IE 7。

如果这不正是你想要的,试着玩一些负利润。

Kevin Brown 16 年前

首先,为什么不使用内联样式?

我会用这个来针对IE使用一个单独的css文件:

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

我知道这不是一个直截了当的问题,但IE总是很难处理!我认识的大多数设计师/开发人员都会为IE制作一个全新的样式表。

DMin 15 年前

这是一个非常粗糙但仅限于CSS的解决方案,可以在IE、chrome和FF中正常工作。

我采用了卡巴的解决方案——但问题是,它在IE中工作正常,但所有其他浏览器在两个子div之间显示4倍的空间。即使两个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>