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%宽度 有解决方法吗? - 代码日志