Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素会展开为100％宽度。有解决方法吗？ [英] Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
问题描述
我有一个父 div 浮动左边，有两个子 div 。
父 div 应该（如果我正确理解规范） div s，这是它在Firefox等人中的行为。
$ c> div 展开为100％宽度。这似乎是浮动元素的一个问题，有孩子漂浮的权利。测试页：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp ：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtmllang =enxml：lang =en>
< head>
< title>浮动测试< / title>
< / head>
< body>
< div style =border-top：solid 10px＃0c0; float：left;>
< div style =border-top：solid 10px＃00c; float：right;>测试器1< / div>
< div style =border-top：solid 10px＃c0c; float：right;>测试程序2< / div>
< / div>
< / body>
< / html>不幸的是我无法修复子元素的宽度 div
$ b $ p < c $ c> s，所以我不能在父级设置一个固定的宽度。
有一个CSS的唯一解决方法，使父
解决方案 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 // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =enxml：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;对于IE 7和6中的块级元素。请参见http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ * /
}
< ; / style>
<！[endif] - >
< / head>
< body>
< div class =container>
< div class =tester1>测试员1< / div>
< div class =tester2>测试员2< / div>
< / div>
< / body>
< / html>
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?
解决方案 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>
这篇关于Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素会展开为100％宽度。有解决方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
