在 IE7 中渲染时,我遇到 HTML 问题。
将“margin:auto”块与“float:right”块组合时。
这是此问题的示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="floating" style="float: right; background-color: #ccf">
This is the top right links block
</div>
<div id="body" style="width: 800px; margin: auto; background-color: #fcc">
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
</div>
</body>
IE7 中此代码的问题:
- margin:auto 未使块“body”居中。看起来块“浮动”在某种程度上影响了
我在 IE7 中得到的居中:
将是(div“body”居中):
- 正确的显示 当折叠 IE7 中的内容时,“浮动”块实际上并未浮动在主体上
:
正确显示:
有没有人遇到过这种情况有问题吗?
有什么提示可以在 IE7 上正确执行此操作吗?
谢谢
I have a problem in HTML, when rendering in IE7.
When combining a "margin:auto" block along with a "float:right" block.
This is a sample code for this issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="floating" style="float: right; background-color: #ccf">
This is the top right links block
</div>
<div id="body" style="width: 800px; margin: auto; background-color: #fcc">
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
</div>
</body>
Problem with this code in IE7:
- the margin:auto is not centering the block "body". It looks like the block "floating" is somehow affecting the centering
what I get in IE7:
The correct display will be (div "body" centered):
- the "floating" block is not actually floating over the body, when collapsing
what I get in IE7:
correct display:
Has anyone run into this kind of problem?
Any hint to get this right on IE7?
Thank you
发布评论
评论(1)
将两个 div 包裹在一个包含 div 中。给定包装纸宽度:100%;或任何你想要的总宽度。所以你的代码应该是这样的:
我不太明白,但你可以将它包装在 div 中,或者给 body 标签设置 100% 的宽度或任何你想要的大小。无论如何,通常最好给 body 标签设置 100% 的宽度,然后设置一个包装 div 来设置盒子宽度的样式。
Wrap the two divs in a containing div. Give the wrapper width: 100%; or whatever total width you want. So you code should look like this:
I don't really understand it but you can either wrap it in a div or give the body tag a width of 100% or whatever size you want. it's usually good to give the body tag a width of 100% anyway and hen set a wrapping div to style the width of the box.