css - Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

Question

Welcome To Ask or Share your Answers For Others

css - Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

I've got a parent div floated left, with two child divs that I need to float right.

The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.

In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:

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

Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.

Is there a CSS-only workaround to make the parent div as wide as the child divs?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:30:36+0000

Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <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>

Categories

css - Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

css - Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags