margin auto + float right 在 IE7 中不起作用答案

【问题标题】：margin auto + float right not working in IE7margin auto + float right 在 IE7 中不起作用
【发布时间】：2011-09-13 23:30:35
【问题描述】：

在 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 不在块“主体”的中心。看起来“浮动”的块在某种程度上影响了居中

我在 IE7 中得到了什么：

正确的显示将是（div“body”居中）：

折叠时，“浮动”块实际上并未漂浮在身体上方

我在 IE7 中得到了什么：

正确显示：

有人遇到过这种问题吗？
有什么提示可以在 IE7 上做到这一点吗？

谢谢

【问题讨论】：

对我来说看起来不错，但是我只能通过将 IE9 置于 IE7 呈现模式来进行测试。唯一的区别似乎是 IE7 在主体上放置了更多的填充/边距，这可以通过重置样式表轻松纠正
添加了一些图片来澄清问题
@mr.nicksta - IE7 兼容模式和 IE7 的真实副本之间的渲染存在显着差异，因此，如果您只是使用 IE9 的 IE7 模式测试您的站点的 IE7，那么您' 与 IE7 的兼容性可能比你想象的要低。建议下载IETester之类的工具，让你使用真正的IE7渲染引擎。
为了让事情变得更简单，我已将问题中的代码示例粘贴到 JSFiddle 页面中：jsfiddle.net/E6c9g -- IE7 确实与其他浏览器不同。恐怕我真的没有适合你的解决方案，但我希望这能让其他人更容易尝试。
我刚刚发布了具有此代码预期正确显示的图像

标签： css internet-explorer-7 css-float

【解决方案1】：

将两个 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 来设置框的宽度。

【讨论】：

试过这个但没有用。我在问题中添加了一些图片以更好地解释问题
我认为您正在减弱要向右浮动的元素，但在主体内部是正确的，因此 div id=floating 位于主体的右侧。请看更新后的代码
恐怕这并不能解决问题。我们希望“浮动”的 div 浮动超过 800px（这是“body” div 的宽度）。根据浏览器屏幕的不同，“浮动”div 实际上可以浮动在“body”div 上方或屏幕右侧（“body”div 之外）。
我刚刚在问题中添加了一些图片，并使用正确的可视化来显示预期的显示结果。
我做了一个快速搜索，看起来唯一真正的方法是使用定位元素或 jquery。这是另一个关于类似问题的帖子的链接。 reference 从经验来看，定位元素可能会导致其他令人头疼的跨浏览器合规性问题，尽管现在随着较新的浏览器越来越少。