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

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/css/220839.html

猜你在找的CSS相关文章