当前位置： 文江博客话题详情

Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，浮动元素会扩展至 100% 宽度。 有解决方法吗？

发布于 2024-07-20 10:29:36 字数 945 浏览 4 评论 0原文

我有一个父 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 一样宽？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

长伴 2024-07-27 10:29:36

这是一个使 inline-block 在 IE6 上工作的解决方案，如 http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 使元素的行为更像右浮动

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>

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>
回复 原文
北凤男飞 2024-07-27 10:29:36

我想出了一个使用 text-align: right 和 display: inline 的解决方案。

试试这个：

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

注意，我必须切换标记中“测试器”框的顺序，以与您的示例相同的方式显示。 我认为新容器上有一个替代方案，即 margin-top，但我现在没有时间研究。

如果您想为所有其他浏览器提供更清晰的样式，请尝试以下操作：

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

当您想要在这些框周围布局内容时，可能会出现一些不同的问题。 不过，我认为这些问题比这个问题更容易解决。

希望这对您有帮助。

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.

回复 原文
櫻之舞 2024-07-27 10:29:36

我无法提出符合您要求的纯 CSS 解决方案，但如果您想使用 JavaScript 解决方案，也许下面的代码可以提供帮助？ 我没有改变 div 的样式，只是将 ID main、sub1 和 sub2 添加到您的 div 中。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;

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;
回复 原文
帝王念 2024-07-27 10:29:36

我遇到了同样的问题，并通过使用position:absolute和right:0定位子元素（我想向右浮动）来解决。 我给了父元素足够的正确填充，为子元素腾出空间...值得一试，可能不适用于所有应用程序！

I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!

回复 原文
悟红尘 2024-07-27 10:29:36

使用单单元格表格而不是外部 div 怎么样？ 可能需要更多的工作才能使所有内容正确对齐，但表格不会扩展。

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.

回复 原文
等风来 2024-07-27 10:29:36

您可以从以下开始：

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

结果似乎至少在您正在寻找的范围内。 显然，您需要根据需要对其进行调整，并且可能添加一些 css 逻辑以仅将其应用于浏览器 < IE 7。

如果这不是您想要的，请尝试使用一些负边距。

Something you could start with is this:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser < IE 7.

If that's not exactly what you're looking for, try playing with some negative margins.

回复 原文
何其悲哀 2024-07-27 10:29:36

首先，为什么不使用内联样式？

我会使用它来使用单独的 css 文件来定位 IE：

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

我知道这不是一个直接的问题，但 IE 总是很难处理！ 我认识的大多数设计师/开发人员都会为 IE 制作一个全新的样式表。

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.

回复 原文
情释 2024-07-27 10:29:36

一个非常 hacky 但仅 CSS 的解决方案，在 IE、chrome 和 FF 中工作正常。

我采用了 kaba 的解决方案 - 但问题是，它在 IE 中工作正常，但所有其他浏览器在 2 个子 div 之间显示 4px 空间。 即使两个 div 上的内容都展开，空间仍保持为 4px。 为了解决这个问题，我使用了 IE 条件语句。 我看起来不像世界上最好的代码，但它完成了工作。

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

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 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文