发表新帖
发表新帖

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

后端 未结
关注
8 884
滥情空心
滥情空心 2020-12-13 06:43

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 th

相关标签:
8条回答
  • 北海茫月
    2020-12-13 07:04

    I came up with a solution using text-align: right and display: inline.

    Try this: 

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

    Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.

    If you want cleaner styling for all other browsers try this:

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

    There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one.

    Hope this was helpful for you.

    0 讨论(0)
  • 囚心锁ツ
    2020-12-13 07:05

    What about using a single-cell table instead of the outer div? It may need some more work to have everything aligned properly, but the table doesn't expand.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-13 07:14

    Firstly, why aren't you using inline styles?

    I'd use this to target IE with a separate css file:

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

    I know this isn't a direct question, but IE is ALWAYS a pain to deal with! Most designers/developers that I know will make a totally new stylesheet for IE.

    0 讨论(0)
  • 轮回少年
    2020-12-13 07:16

    I couldn't come up with a CSS-only solution that fits your requirements, but if you want to use a JavaScript solution, maybe the following code can help? I did not alter the style of the divs, I only added the IDs main, sub1, and sub2 to your divs.

    var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
    0 讨论(0)
  • 走了就别回头了
    2020-12-13 07:17

    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>
    0 讨论(0)
  • 眼角桃花
    2020-12-13 07:25

    A very hacky but a CSS only solution that works okay in IE, chrome and FF.

    I took kaba's solution - but the problem was, it works okay in IE but all the other browsers show a 4px space between the 2 child divs. The space remains as 4px even if the content on both the divs expand. So to fix that I've used IE conditional statements. I doesn't look like the best code in the world but it gets the job done.

    <!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>
    0 讨论(0)
 看不清?
提交回复
热议问题