背景和非自动宽度问题 [英] Background and non-auto-width questions
问题描述
您好，
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http： //www.w3.org/TR/html4/strict.dtd">
< title>< / title>
< style type =" text / css">
body {background-color：white;颜色：黑色;}
#parent_block {background-color：red; width：100％;}
#nested_child_block {margin：150px 0px;背景颜色：绿色;颜色：
白色;}
< / style>
< / head>
< body> ;
< div id =" parent_block">< p id =" nested_child_block"> foo< / p>< / div>
关于上述代码的2个问题。
1-为什么Firefox 2和Opera 9不会在绿色儿童上面呈现大红色区域和
块？ ......就像MSIE 7一样
2-如果我删除宽度：100％，那么MSIE 7不显示大红色区域
以上和以下绿色的孩子。为什么？
我缺少什么？
谢谢
$ b $bGérard
-
删除等等给我发电子邮件
GérardTalbot < ne *********** @ gtalbot.org写了留言
新闻：12 ************* @ corp.supernews.com ...
你好，
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< title>< / title> ;
< style type =" text / css">
body {background-color：white;颜色：黑色;}
#parent_block {background-color：red; width：100％;}
#nested_child_block {margin：150px 0px;背景颜色：绿色;颜色：
白色;}
< / style>
< / head>
< body> ;
< div id =" parent_block">< p id =" nested_child_block"> foo< / p>< / div>
关于上述代码的2个问题。
1-为什么Firefox 2和Opera 9不会在绿色儿童上面呈现大红色区域和
块？ ......就像MSIE 7一样
2-如果我删除宽度：100％，那么MSIE 7不显示大红色区域
以上和以下绿色的孩子。为什么？
我缺少什么？
谢谢
$ b $bGérard
请参阅8.3.1折叠边距在w3.org css2规范中
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"在本规范中，表达式折叠边距表示
相邻的边距（没有非空内容，填充或边框区域或
清除它们分开）两个或更多的盒子（可能在一个旁边） />
另一个或嵌套的）组合形成一个边距。
一个更好的解释：
http://www.complexspiral.com/publica...psing-margins/
Rich
2006-10-30，GérardTalbot< ne *********** @ gtalbot.orgwrote：
您好，
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http ：//www.w3.org/TR/html4/strict.dtd">
< title>< / title>
< style type =" text / css">
body {background-color：white;颜色：黑色;}
#parent_block {background-color：red; width：100％;}
#nested_child_block {margin：150px 0px;背景颜色：绿色;颜色：
white;}
< / style>
< / head>
< body>
< div id =" parent_block">< p id =" nested_child_block"> foo< / p>< / div>
关于上述代码的2个问题。
1-为什么Firefox 2和Opera 9不会在绿色子块下方呈现大红色区域和
？ ...就像MSIE 7那样
这是因为子块的顶部和底部边距应该会崩溃
父母一块，正如rh所说。 MSIE 7未能做到这一点
。
2-如果我删除宽度：100％，那么MSIE 7不显示大红色区域
绿色儿童区块上方和下方。这是为什么？
宽度：根据CSS规范，100％是无意义的
。无论如何，父块的计算宽度应该是其
容器（在本例中为视口）的宽度的100％。所以我认为你在另一个MSIE 7错误或不符合的情况下看起来好了。
rhaécrit：
< blockquote class =post_quotes>
"GérardTalbot" < ne *********** @ gtalbot.org写了留言
新闻：12 ************* @ corp.supernews.com ...
>您好，
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http://www.w3.org/TR/html4/strict.dtd">
< title>< / title>
< style type = " text / css">
body {background-color：white;颜色：黑色;}
#parent_block {background-color：red;宽度：100％;}
#nested_child_block {margin：150px 0px;背景颜色：绿色;颜色：
白色;}
< / style>
< / head>
< body>
< div id =" parent_block"> < p id =" nested_child_block"> foo< / p>< / div>
关于上述代码的2个问题。
1-为什么选择Firefox 2和Opera 9不会在绿色儿童区域上面呈现大红色区域和
吗？ ......就像MSIE 7一样
2-如果我删除宽度：100％，那么MSIE 7不会在绿色子块的上方和下方显示大的红色区域。为什么？
我错过了什么？
谢谢
Gérard
请参阅8.3.1折叠边距在w3.org css2规范中
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"在本规范中，表达式折叠边距表示
相邻的边距（没有非空内容，填充或边框区域或
清除它们分开）两个或更多的盒子（可能在一个旁边） />
另一个或嵌套的）组合形成一个边距。
一个更好的解释：
http://www.complexspiral.com/publica...psing-margins/
Rich
Rich，我仍然不明白为什么Firefox 2和Opera 9渲染
边缘区域为白色而非红色。在以下测试用例中：
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：// www。 w3.org/TR/html4/strict.dtd">
< title>为什么保证金区域不是红色？< / title>
< style type =" text / css">
body {background-color：white;颜色：黑色;保证金：0px;}
#parent_block {background-color：red;宽度：100％;保证金：0px;}
#nested_child_block {保证金：150px 0px;背景颜色：绿色;颜色：
白色;}
< / style>
< div id =" parent_block">< ; p id =" nested_child_block"> foo< / p>< / div>
没有涉及保证金的崩溃。 MSIE 7（最终版）
将边距区域渲染为红色，而不是白色。 Firefox 2.0和Opera 9.1
将边距区域渲染为白色，而不是红色。我希望了解原因。
感谢您的时间，
$ b $bGérard
-
删除等等给我发电子邮件
Hello,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
2 questions regarding the above code.
1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 does
2- If I remove width: 100%, then MSIE 7 does not show the large red area
above and below the green child block. Why is that?
What am I missing?
Thank you
Gérard
--
remove blah to email me
"Gérard Talbot" <ne***********@gtalbot.orgwrote in message
news:12*************@corp.supernews.com...Hello,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
2 questions regarding the above code.
1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 does
2- If I remove width: 100%, then MSIE 7 does not show the large red area
above and below the green child block. Why is that?
What am I missing?
Thank you
GérardSee "8.3.1 Collapsing margins" in the w3.org css2 specs
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, padding or border areas or
clearance separate them) of two or more boxes (which may be next to one
another or nested) combine to form a single margin."
A better explanation:
http://www.complexspiral.com/publica...psing-margins/
Rich
On 2006-10-30, Gérard Talbot <ne***********@gtalbot.orgwrote:Hello,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
2 questions regarding the above code.
1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 doesThis is because the child block''s top and bottom margins should collapse
with those of the parent block, as rh said. MSIE 7 is failing to do
this.
2- If I remove width: 100%, then MSIE 7 does not show the large red area
above and below the green child block. Why is that?The width: 100% is, according to the CSS specification, meaningless
here. The parent block''s computed width should be 100% the width of its
container (in this case the viewport) anyway. So I think you''re looking
at another MSIE 7 bug or non-conformance.
rh a écrit :"Gérard Talbot" <ne***********@gtalbot.orgwrote in message
news:12*************@corp.supernews.com...>Hello,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
2 questions regarding the above code.
1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 does
2- If I remove width: 100%, then MSIE 7 does not show the large red area
above and below the green child block. Why is that?
What am I missing?
Thank you
Gérard
See "8.3.1 Collapsing margins" in the w3.org css2 specs
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, padding or border areas or
clearance separate them) of two or more boxes (which may be next to one
another or nested) combine to form a single margin."
A better explanation:
http://www.complexspiral.com/publica...psing-margins/
RichRich, I still do not understand why Firefox 2 and Opera 9 render the
margin area as white and not red. In the following testcase:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Why the margin area is not red?</title>
<style type="text/css">
body {background-color: white; color: black; margin: 0px;}
#parent_block {background-color: red; width: 100%; margin: 0px;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
<div id="parent_block"><p id="nested_child_block">foo</p></div>
there is no collapsing of margin involved. MSIE 7 (final release)
renders the margin area as red, not white. Firefox 2.0 and Opera 9.1
render the margin area as white, not red. I wish to understand why.
Thank you for your time,
Gérard
--
remove blah to email me
这篇关于背景和非自动宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
