浮动和IE的问题 [英] Problem with floats and IE
问题描述
请查看：
http://www.geocities.com/stanio/test/ie_and_floats.html
基本上我有这样的内容块：
< div class =" someblock">
< img class =" preview" ...>
< p> ...< / p>
< div class =" clear">< / div>
< / div>
其中预览图像浮动到右边，clear
元素具有'clear：both''样式，以确保父容器将
扩展到浮动图像高度至少。
我在使用Internet Explorer时遇到的问题是当正常的
内容比浮动图像短时：注意容器
块左边缘延伸到页面边界，虽然
应该是填充（来自父UL元素）。
我已经尝试了各种调整但没有任何帮助。有没有人
在IE上遇到这样的问题并且有一些解决方法？
-
Stanimir
Take a look at:
http://www.geocities.com/stanio/test/ie_and_floats.html
Basically I got such content blocks:
<div class="someblock">
<img class="preview" ...>
<p>...</p>
<div class="clear"></div>
</div>
Where the "preview" image is floated to the right and the "clear"
element has ''clear: both'' style to ensure the parent container will
extend to the floated image height at minimum.
The problem I encounter with Internet Explorer is when the normal
content is shorter than the floated image: notice the container
block left edge extends to the page boundaries, although there
should be a padding (from the parent UL element).
I''ve tried various tweaks but nothing have helped. Has anybody
encountered such issue with IE and have some workaround in mind?
--
Stanimir
推荐答案
Stanimir Stamenkov< s7 **** @ netscape.net>写道：
Stanimir Stamenkov <s7****@netscape.net> wrote:
http： //www.geocities.com/stanio/test/ie_and_floats.html
预览的位置图像浮动到右侧，清除元素具有清晰：两种的样式，以确保父容器将至少延伸到浮动图像高度。
<我遇到的问题是Internet Explorer的正常内容比浮动图像短：注意容器
块左边缘延伸到页面边界，尽管
应该是填充（来自父UL元素）。
http://www.geocities.com/stanio/test/ie_and_floats.html
Where the "preview" image is floated to the right and the "clear"
element has ''clear: both'' style to ensure the parent container will
extend to the floated image height at minimum.
The problem I encounter with Internet Explorer is when the normal
content is shorter than the floated image: notice the container
block left edge extends to the page boundaries, although there
should be a padding (from the parent UL element).
这不是IE的问题，了解浮点数和高度计算
的工作原理：
http：// www。 w3.org/TR/CSS2/visuren.html#floats
http://www.w3.org/TR/CSS2/visudet.ht...ts_and_margins
-
Spartanicus
This is not an issue with IE, learn how floats and height calculation
work:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.w3.org/TR/CSS2/visudet.ht...ts_and_margins
--
Spartanicus
/ Spartanicus /：
/Spartanicus/:
这不是IE的问题，了解浮点数和高度计算是如何工作的：
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.w3.org/TR/CSS2/ visudet.ht ... ts_and_margins
This is not an issue with IE, learn how floats and height calculation
work:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.w3.org/TR/CSS2/visudet.ht...ts_and_margins
似乎我不理解你 - 我的问题不是关于高度而是
关于水平地移位。 （或什么？）块。以下是截图：
http：// www.geocities.com/stanio/test...oat_ieshot.PNG
http://www.geocities.com/stanio/test...at_mozshot.PNG
与Mozilla合作的第二个是什么它应该是。
-
Stanimir
Seems I didn''t understand you - my problem is not about heights but
about horizontally "shifted" (or what?) blocks. Here are screenshots:
http://www.geocities.com/stanio/test...oat_ieshot.PNG
http://www.geocities.com/stanio/test...at_mozshot.PNG
The second being got with Mozilla is what it should be.
--
Stanimir
Stanimir Stamenkov< s7 *** *@netscape.net>写道：
Stanimir Stamenkov <s7****@netscape.net> wrote:
看看：
http：/ /www.geo cities.com/stanio/test/ie_and_floats.html
有没有想过要离开地理位置？这是一个很好的想法，它是geosities，并且虚拟主机是相对新的和昂贵的。
现在你可以拿到数百兆字节10 / mo或更少，
服务器数据库，ftp访问当然，以及其他任何东西。
我遇到Internet Explorer的问题是当正常
内容较短时比浮动图像：注意容器
块左边缘延伸到页面边界，虽然
应该是一个填充（来自父UL元素）。
Take a look at: http://www.geo cities.com/stanio/test/ie_and_floats.html
Ever thought of getting off geocities? It was a neat idea when it WAS
geocities, and virtual hosting was relatively new and expensive.
Nowadays you can pick up hundreds of megabytes for 10/mo or less,
server db, ftp access of course, and whatever else.
The problem I encounter with Internet Explorer is when the normal
content is shorter than the floated image: notice the container
block left edge extends to the page boundaries, although there
should be a padding (from the parent UL element).
多少块宽度？
body {background：white;颜色：黑色}
.someblock {
display：block;
background：＃d7d7d7;
margin-底部：0.5em;
填充：1px;
宽度：100％;
}
img.preview {
宽度：5em;
身高：7em;
浮动：正确;
margin-left：0.5 em;
border：1px dashed;
}
.clear {clear：both}
li {
margin-left：2.5em;
padding-left：0;
}
Howabout someblock width?
body { background: white; color: black }
.someblock {
display: block;
background: #d7d7d7;
margin-bottom: 0.5em;
padding: 1px;
width: 100%;
}
img.preview {
width: 5em;
height: 7em;
float: right;
margin-left: 0.5em;
border: 1px dashed;
}
.clear { clear: both }
li {
margin-left: 2.5em;
padding-left: 0;
}
这篇关于浮动和IE的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
