margin auto + float权限在IE7中不起作用

时间：2011-09-13 11:58:34

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

我在IE7中渲染时遇到HTML问题 合并＆＃34;保证金：自动＆＃34;阻止＆＃34;浮动：右＆＃34;块。

这是此问题的示例代码：

<!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中此代码的问题：

  • 保证金：auto不会使块＆＃34; body＆＃34;居中。看起来像块＆＃34;漂浮＆＃34;以某种方式影响中心

我在IE7中得到的结果：

div "body" is not centered

正确的显示将是（div＆＃34; body＆＃34;居中）：

div "body" correctly centered

  • ＆＃34;漂浮＆＃34;当折叠时，块实际上并没有漂浮在身体上

我在IE7中得到的结果：

div "floating" do not float

正确显示：

div "floating" correctly floating

有没有人遇到过这种问题？ 是否有任何提示在IE7上正确使用？
谢谢

1 个答案:

答案 0 :(得分：0)

将两个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％或任何你想要的大小。无论如何，给身体标签宽度为100％通常是好的，并设置一个包装div来设置盒子的宽度。

相关问题
最新问题