孩子的上边距和父母的背景 [英] Child's top margin and parent's background
问题描述
您好，
以下在IE和非IE中给出了不同的结果。浏览器：
< div style =" background-color：green;宽度：200px">
< div style =" margin-top：20px; background-color：red">
你好
< / div>
< / div>
虽然IE显示20px的可见绿色上边距，但Mozilla和其他
浏览器仅在
的高度启动父元素的背景颜色内部div，因此根本没有绿色。有没有办法在所有浏览器中实现
相同的行为（单向或另一种）？
问候，
comp.infosystems中的Thomas
Hello,
The following gives different results in IE and "Non-IE" browsers:
<div style="background-color: green; width: 200px">
<div style="margin-top: 20px; background-color: red">
Hello
</div>
</div>
While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element''s background color only at the height of
the inner div, thus showing no green at all. Is there a way to achieve the
same behaviour (one way or the other) in all browsers?
Greetings,
Thomas
推荐答案
。 www.authoring.stylesheets ，Thomas Mlynarczyk写道：
in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:
你好，
以下在IE和非IE中给出了不同的结果。浏览器：
< div style =" background-color：green; width：200px">
< div style =" margin-top：20px; background-color：red">
你好
< / div>
< / div>
虽然IE显示可见的绿色上边距为20px， Mozilla和其他
浏览器仅在内部div的高度处启动父元素的背景颜色，因此根本不显示绿色。有没有办法在所有浏览器中实现相同的行为（一种方式或另一种方式）？
Hello,
The following gives different results in IE and "Non-IE" browsers:
<div style="background-color: green; width: 200px">
<div style="margin-top: 20px; background-color: red">
Hello
</div>
</div>
While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element''s background color only at the height of
the inner div, thus showing no green at all. Is there a way to achieve the
same behaviour (one way or the other) in all browsers?
在这里折叠边距。在外部元素上使用填充。
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
Collapsing margins here. Use padding on outer element.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
同样出现了Lauri Raittila：
Also sprach Lauri Raittila:
虽然IE显示20px的可见绿色上边距，但Mozilla和其他浏览器仅在内部div的
高度处启动父元素的背景颜色，因此显示no绿色的。是否有一种方法可以在所有浏览器中实现相同的行为（一种方式或另一种方式）？
While IE shows a visible green top margin of 20px, Mozilla and other
browsers start the parent element''s background color only at the
height of the inner div, thus showing no green at all. Is there a
way to achieve the same behaviour (one way or the other) in all
browsers?
此处折叠边距。在外部元素上使用填充。
Collapsing margins here. Use padding on outer element.
不幸的是，这不会工作。在我的情况下。有几个同样
风格的内部元素，由上边距垂直分隔。在外部元素上使用顶部
填充将意味着边距不再崩溃
并且我最终会得到比我想要的更多的垂直空间。我想我可以
给第一个元素一个特殊的处理但是我觉得它不是很优雅
引入一个class =" first"为了那个原因。 （我知道有一些特殊的CSS选择器
用于这样的目的，但IE不支持它们。）我想如果我在外面放一个
边框元素，边距不会再崩溃，但是如果我不想要边框那么什么是b $ b？
或者有没有办法让IE崩溃comp.infosystems中的边距也是？
Unfortunately, this wouldn''t "work" in my case. There are several equally
styled inner elements, vertically separated by a top margin. Using a top
padding on the outer element would mean that the margin no longer collapses
and I would end up with more vertical space than I want. I suppose I could
give the first element a special treatment but I find it not very elegant to
introduce a class="first" for that. (I know there are special CSS selectors
for such a purpose, but IE doesn''t support them.) I think that if I put a
border on the outer element, the margin would no longer collapse, but what
if I don''t want a border?
Or is there a way to make IE collapse the margin as well?
。 www.authoring.stylesheets ，Thomas Mlynarczyk写道：
in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:
同样出现了Lauri Raittila：
Also sprach Lauri Raittila:
折叠边距这里。在外部元素上使用填充。
Collapsing margins here. Use padding on outer element.
不幸的是，这不会工作。在我的情况下。有几个同样风格的内部元素，由上边缘垂直分隔。在外部元素上使用顶部
填充意味着边距不再坍塌
我最终会得到比我想要的更多的垂直空间。
Unfortunately, this wouldn''t "work" in my case. There are several equally
styled inner elements, vertically separated by a top margin. Using a top
padding on the outer element would mean that the margin no longer collapses
and I would end up with more vertical space than I want.
仅在内部元素上使用底部边距？ （保证金：0 20px 20px 20px;）
在内部元素上使用填充？像填充顶部一样：1px;
（或者做一些相对定位的技巧。）
我想我可以给第一个元素一个特殊的待遇，但我发现引入一个类=第一个并不是很优雅。为了那个原因。
div.outer：第一个孩子{margin-top：0;}
（我知道有这样一个特殊的CSS选择器
目的，但IE不支持他们。）
但是你没有IE的问题，对吧？
我想如果我在外部元素上设置边框，边距不会再崩溃，但如果我不想要边框怎么办？
是的，保证金之间的任何内容，边界或填充意味着保证金
不会崩溃
或者是否存在让IE崩溃边缘的方法是什么？
Only use bottom margin on inner elements? (margin: 0 20px 20px 20px;)
Use padding on inner element? someting like padding-top:1px;
(Or do some tricks with relative positioning.)
I suppose I could
give the first element a special treatment but I find it not very elegant to
introduce a class="first" for that.
div.outer:first-child {margin-top:0;}
(I know there are special CSS selectors
for such a purpose, but IE doesn''t support them.)
But you didn''t have problem with IE, right?
I think that if I put a border on the outer element, the margin would
no longer collapse, but what if I don''t want a border?
Yes, any content, border or padding between margins means that margin
won''t collapse
Or is there a way to make IE collapse the margin as well?
确保它处于标准模式。不知道它是否有帮助。
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
Make sure it is in standards mode. Don''t know if it helps though.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
这篇关于孩子的上边距和父母的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
