css – Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时,浮动元素会展开为100％宽度有解决方法吗？

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

父div应该(如果我理解规范正确)根据需要包含子div，这是它的行为在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的宽度，所以我不能在父设置一个固定的宽度。

有没有一个CSS的唯一的解决方法，使父div像孩子div一样宽？

解决方法

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

css – Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时,浮动元素会展开为100％宽度 有解决方法吗？

解决方法

相关文章

css – Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时,浮动元素会展开为100％宽度有解决方法吗？