IE浮动问题 [英] IE float problem
问题描述
我正在刷我的CSS，已经遇到了IE 6的问题
以下代码应显示两个相邻的div在
容器。问题是在IE6中，左侧div在右侧下方开始一行
div。看来，如果我将容器的宽度从400px更改为
403px它将起作用，但是200 + 200 = 400，那么为什么不能IE渲染然后并排
，因为有足够的空间供他们使用吗？
< style type =" text / css">
#container {
background-color：pink;
宽度：400px;
}
#right {
float：right;
宽度：200px;
背景颜色：红色;
}
#left {
宽度：200px;
背景颜色：绿色;
}
< / style>
< div id =" container">
< div id =" right"> Right< / div>
< div id =" left"> Left< / div>
< / div> ;
I''m brushing up on my CSS, already running into problems with IE 6
The follow code should display two divs adjacent to each other within a
container. The problem is in IE6 the left div starts a row below the right
div. It appears that if I change the width of the container from 400px to
403px it will work, but 200+200=400 so why won''t IE render then side by side
given there is enough room for them to fit?
<style type="text/css">
#container {
background-color: pink;
width: 400px;
}
#right {
float: right;
width:200px;
background-color: red;
}
#left {
width: 200px;
background-color: green;
}
</style>
<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>
推荐答案
mark写道：
mark wrote:
我正在刷我的CSS ， 已经运行 IE 6的问题
以下代码应该在
容器中显示两个相邻的div。问题是在IE6中，左侧div在右侧下方开始一行
div。看来，如果我将容器的宽度从400px更改为
403px它将起作用，但是200 + 200 = 400，那么为什么不能IE渲染然后并排
，因为有足够的空间让他们适应？
I''m brushing up on my CSS, already running into problems with IE 6
The follow code should display two divs adjacent to each other within a
container. The problem is in IE6 the left div starts a row below the right
div. It appears that if I change the width of the container from 400px to
403px it will work, but 200+200=400 so why won''t IE render then side by side
given there is enough room for them to fit?
因为IE6给浮动一侧增加了3px的空间。
它被称为3px慢跑bug：
http://www.positioniseverything.net/...reepxtest.html
-
Els http://locusmeus.com/
无障碍网页设计： http://locusoptimus.com/
正在播放：Jethro Tull - 厚实如砖（编辑N？°1）
Because IE6 gives an extra 3px space to the side of a float.
It''s called the 3px jog bug:
http://www.positioniseverything.net/...reepxtest.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Jethro Tull - Thick As A Brick (Edit N?°1)
mark于2007年3月在comp.infosystems上发表。 www.authoring.stylesheets ：
mark wrote on 03 mrt 2007 in comp.infosystems.www.authoring.stylesheets:
我正在刷我的CSS，已经遇到了IE 6的问题
以下公司de应该在容器内显示两个相邻的div。问题是在IE6中，左边的div在
右边的div下面开了一行。看来，如果我将容器的宽度从
400px改为403px，它会起作用，但是200 + 200 = 400，那么为什么IE不会渲染
然后鉴于有足够的空间供他们使用？
< style type =" text / css">
#container {
background-color：pink;
宽度：400px;
}
#right {
float：right;
宽度：200px;
背景颜色：红色;
}
#left {
宽度：200px;
背景颜色：绿色;
}
< / style>
< div id =" container">
< div id =" right"> Right< / div>
< div id =" left"> Left< / div>
< / div> ;
I''m brushing up on my CSS, already running into problems with IE 6
The follow code should display two divs adjacent to each other within
a container. The problem is in IE6 the left div starts a row below the
right div. It appears that if I change the width of the container from
400px to 403px it will work, but 200+200=400 so why won''t IE render
then side by side given there is enough room for them to fit?
<style type="text/css">
#container {
background-color: pink;
width: 400px;
}
#right {
float: right;
width:200px;
background-color: red;
}
#left {
width: 200px;
background-color: green;
}
</style>
<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>
< style type =" text / css">
#container {
background-color：pink;
宽度：400 px;
}
＃right，＃left {
float：right;
宽度：200px;
背景颜色：红色;
}
#left {
背景-color：绿色;颜色：白色;
}
< / style>
< div id =" container">
< div id =" right"> Right< / div>
< div id =" left"> ;左< / div>
< / div>
-
Evertjan。
荷兰。
（请在我的电子邮件地址中将x'变为点数）
<style type="text/css">
#container {
background-color:pink;
width: 400px;
}
#right, #left {
float: right;
width:200px;
background-color:red;
}
#left {
background-color:green;color:white;
}
</style>
<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)
" Evertjan。 < ex ************** @ interxnl.netwrote in message
news：Xn **************** **** @ 194.109.133.242 ...
"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...
#right，＃left {
float：right;
宽度：200px;
背景颜色：红色;
}
#right, #left {
float: right;
width:200px;
background-color:red;
}
这样可行！但是，请你解释一下你做了什么以及为什么？我不能真的
弄清楚为什么将右边的两个div对齐会修复它？
that works! But can you please explain what you did and why? I can''t really
figure out why align both divs to the right would fix it?
这篇关于IE浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
