Css 保证金自动+；浮动权利在IE7中不起作用_Css_Internet Explorer 7_Css Float

Css 保证金自动+；浮动权利在IE7中不起作用

css

Css 保证金自动+；浮动权利在IE7中不起作用,css,internet-explorer-7,css-float,Css,Internet Explorer 7,Css Float,在IE7中呈现时，我在HTML中遇到问题。将“边距：自动”块与“浮动：右”块组合时这是此问题的示例代码： <!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> <

在IE7中呈现时，我在HTML中遇到问题。
将“边距：自动”块与“浮动：右”块组合时

这是此问题的示例代码：

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

我在IE7中得到了什么：

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

“浮动”块在塌陷时实际上不会浮在主体上

我在IE7中得到了什么：

正确显示：

有人遇到过这种问题吗？
有没有关于IE7的提示

谢谢

将两个div包装在一个包含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来设置框的宽度是很好的。

看起来不错，但是我只能通过将IE9置于IE7渲染模式进行测试。唯一的区别似乎是IE7在主体上增加了更多的填充/边距，这可以通过重置样式表添加一些图片来轻松纠正，以澄清问题issue@mr.nicksta-IE7兼容模式与IE7的真实副本在呈现方面存在显著差异，所以，如果你只是使用IE9的IE7模式来测试你的站点，那么你很可能比你想象的更不兼容IE7。我建议下载这样一个工具，它可以让你使用真正的IE7呈现引擎。为了让事情变得更简单，我将问题中的代码示例粘贴到JSFIDLE页面中：--IE7确实呈现出与其他浏览器不同的效果。恐怕我没有一个真正的解决方案给你，但我希望这能让其他人更容易尝试。我刚刚发布了图片，显示了此代码所需的正确显示。我尝试了此操作，但没有成功。我在问题中添加了一些图片，以更好地解释问题。我认为您正在减少元素向右浮动，但在主体内部是正确的，因此div id=floating位于主体的右侧。请查看更新的代码，恐怕这并不能解决问题。我们希望div“floating”浮动超过800px（这是“body”div的宽度）。根据浏览器屏幕的不同，“浮动”div实际上可以浮动在“body”div上方或屏幕右侧（“body”div外部）。我只是在问题中添加了一些图片，带有正确的可视化效果，以显示预期的显示结果。我进行了快速搜索，看起来唯一真正做到这一点的方法是使用定位元素或jquery。这里是另一篇关于类似问题的帖子的链接。根据经验，在跨浏览器遵从性方面，定位元素可能会引起其他问题，尽管在较新的浏览器中，这种问题越来越少。