CSS Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，它们会扩展到 100% 宽度。有解决方法吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/852104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
提问by Paul D. Waite
I've got a parent divfloated left, with two child divs that I need to float right.
我有一个父母div向左浮动，有两个孩子div我需要向右浮动。
The parent divshould (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.
父级div应该（如果我正确理解规范）尽可能宽以包含子级div，这就是它在 Firefox 等人中的行为方式。
In IE, the parent divexpands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:
在 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>
Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.
不幸的是，我无法固定 childdiv的宽度，所以我无法在 parent 上设置固定宽度。
Is there a CSS-only workaround to make the parent divas wide as the child divs?
是否有仅 CSS 的解决方法可以使 parentdiv与 child 一样宽div？
采纳答案by cryo
Here's a solution which makes inline-blockwork 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:
这是一个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>
回答by kaba
I came up with a solution using text-align: rightand display: inline.
我想出了一个使用text-align: right和的解决方案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.
请注意，我必须切换标记中“tester”框的顺序，以与您的示例相同的方式显示。我认为在新容器上有一种替代方法，即 margin-top，但我现在没有时间研究。
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.
希望这对你有帮助。
回答by evilunix
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!
我遇到了同样的问题，并通过使用 position:absolute 和 right:0 定位子元素（我想向右浮动）解决了这个问题。我给了父元素足够的正确填充来为子元素腾出空间......值得一试，可能不适用于所有应用程序！
回答by Daan
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 sub2to your divs.
我想不出满足您要求的纯 CSS 解决方案，但如果您想使用 JavaScript 解决方案，也许以下代码可以提供帮助？我并没有改变的div的风格，我只加了标识main，sub1和sub2你的div。
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
回答by Oren Shalev
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.
使用单单元格表而不是外部 div 怎么样？可能需要做更多工作才能正确对齐所有内容，但表格不会展开。
回答by Josh E
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.
结果似乎至少在您正在寻找的范围内。显然，您想根据自己的需要调整它，并可能添加一些 css 逻辑以仅将其应用于浏览器 < IE 7。
If that's not exactly what you're looking for, try playing with some negative margins.
如果这不是您真正想要的，请尝试使用一些负边距。
回答by Kevin Brown
Firstly, why aren't you using inline styles?
首先，你为什么不使用内联样式？
I'd use this to target IE with a separate css file:
我会用它来定位带有单独 css 文件的 IE：
<!--[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.
我知道这不是一个直接的问题，但是处理 IE 总是很痛苦！我认识的大多数设计师/开发人员都会为 IE 制作一个全新的样式表。
回答by DMin
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.
一个非常笨拙但仅 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>
