自动保证金 +向右浮动在 IE7 中不起作用

发布于 2024-12-04 08:17:39 字数 1382 浏览 2 评论 0 原文

在 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

将是(div“body”居中):

div“body”正确居中

  • 正确的显示 当折叠 IE7 中的内容时,“浮动”块实际上并未浮动在主体上

div

正确显示:

div

有没有人遇到过这种情况有问题吗?
有什么提示可以在 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:

div "body" is not centered

The correct display will be (div "body" centered):

div "body" correctly centered

  • the "floating" block is not actually floating over the body, when collapsing

what I get in IE7:

div "floating" do not float

correct display:

div "floating" correctly floating

Has anyone run into this kind of problem?
Any hint to get this right on IE7?

Thank you

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

猥︴琐丶欲为 2024-12-11 08:17:39

将两个 div 包裹在一个包含 div 中。给定包装纸宽度:100%;或任何你想要的总宽度。所以你的代码应该是这样的:

<!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="wrapper" style="width: 100%;">
 <div id="body" style="width: 800px; margin: auto; background-color: #fcc">

/*---- Moved element ---- */
  <div id="floating" style="float: right; background-color: #ccf">
  This is the top right links block
  </div>
/*---- End Moved element ---- */

 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>
</div>
</body>
</html>

我不太明白,但你可以将它包装在 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:

<!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="wrapper" style="width: 100%;">
 <div id="body" style="width: 800px; margin: auto; background-color: #fcc">

/*---- Moved element ---- */
  <div id="floating" style="float: right; background-color: #ccf">
  This is the top right links block
  </div>
/*---- End Moved element ---- */

 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>
</div>
</body>
</html>

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文