'margin-top'奇怪 [英] 'margin-top' Oddity
问题描述
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict。 dtd">
< html>
< head>
< title> test< / title>
< / head>
< body>
< div style =" height：100px;宽度：100px; background-color：red;">
< div style =" height：50px;
margin-top：50px;
background-color：blue">
< / div>
< / div>
< / body>
< / html>
现在，我希望看到100个垂直像素的红色，然后是100
蓝色的垂直像素 - 这*是*我在IE中看到的。然而在
Firefox中，我看到100个垂直像素的白色，后面是100个垂直像素
的蓝色，后面是100个垂直像素的红色。
知道什么事了？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>
Now, with this I''d expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.
Any idea of what''s up?
推荐答案
Cool Guy写道：
Cool Guy wrote:
< ;！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title> test< / title>
< / head>
< body>
< div style =高度：100px;宽度：100px; background-color：red;">
< div style =" height：50px;
margin-top：50px;
background-color：blue">
< / div>
< / div>
< / body>
< / html>
现在，我希望这样看到100个垂直像素的红色，然后是100个垂直像素的蓝色 - 这*是*我在IE中看到的。然而在Firefox中我看到100个垂直像素的白色，然后是100个垂直像素的蓝色，接着是100个垂直像素的红色。
任何想法是什么？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>
Now, with this I''d expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.
Any idea of what''s up?
就个人而言，我希望50px的红色和50px的蓝色。
你确定以上是精确的复制粘贴你的实际例子是什么？
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？£。 O resto ?? crisfeito。
- Renato Russo -
Personally, I''d expect 50px of red, and 50px of blue.
Are you sure the above is an exact copy paste of your actual example?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -
我写道：
I wrote:
任何想法'' s up？
Any idea of what''s up?
好吧，我已经玩过这个了，发现给外部div
''浮动：左''在Firefox中解决了这个问题。有谁知道为什么？
Okay, I''ve played with this a little and found that giving the outer div
''float: left'' fixes this in Firefox. Does anyone know why?
Cool Guy写道：
Cool Guy wrote:
我写道：
I wrote:
知道怎么回事？
好的，我已经玩过这个了，发现给外部的div
''浮动：左' '在Firefox中修复此问题。有谁知道为什么？
Okay, I''ve played with this a little and found that giving the outer div
''float: left'' fixes this in Firefox. Does anyone know why?
还有另一种修复方法：给外边框一个边框。
它是'内部div的余量，即超出外部div，
，除非它有边界。我猜漂浮具有相同的效果，因为它使b $ b定位div。不确定它是如何工作的。
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？£。 O resto ??不好的。
- Renato Russo -
There''s another way of fixing it: give the outer div a border.
It''s the margin on the inner div, that''s going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -
这篇关于'margin-top'奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
