Question

请考虑以下简单示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style=" height:100%; width:100%; background:yellow; " >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE9 Min-Width Problem</title>
</head>
<body style=" width:100%; height:100%; margin:0; background:green;">
<div style=" position:relative; min-width:300px; max-width:100%; margin:auto; background:red; ">
<div style=" position:relative; min-width:0; max-width:600px; margin:auto; padding:10px; ">
<div style=" position:relative; width:100%; height:600px; background:blue; ">
Page contents go here.
</div><!-- closes content -->
</div><!-- closes inner-wrapper -->
</div><!-- closes outer-wrapper -->
</body>
</html>

我的网站使用与此类似的代码来实现具有最小和最大宽度的流畅页面布局，并且除了惊喜，Internet Explorer之外，它在每个浏览器中都能很好地工作。出于某种原因，当您首次加载页面并将其重新调整为较小（或放大）时，HTML元素不会重新调整大小，因此您可以立即获得水平滚动条，并在右侧显示HTML背景。但是，如果刷新页面，则问题完全消失，IE就像其他浏览器一样。 只有在第一次初始加载页面时才会出现此问题，因此如果您刷新页面，则必须离开并返回该站点。

请注意，只有在网页位于服务器上时才会出现这种情况。如果你在本地查看html文件，这个bug就不会让它变得丑陋。既然如此，我已经冒昧地将这些代码上传到我的测试服务器，以便任何人帮助我弄清楚发生了什么。

在http://pace-testing.net84.net

查看该页面

如果任何人都有任何可能有用的信息，我将不胜感激。这包括（1）修复（2）变通方法或（3）实现目标的更好方法。如果您有任何问题，请告诉我，因为我会经常查看这篇文章（我正在把这个帖子拉出来，所以我很想解决它。）

其他详细信息：我在Windows 7 32位上运行Internet Explorer 9.0.8。由于XHTML 1.0 Strict Doctype，浏览器处于Internet Explorer 9标准模式。

Answer 1

我没有看到在IE9 / W7x64中发生这种情况，除非我打开兼容模式（地址栏中的页面图标被破坏）。也许你有意外开启？

您似乎在页面的第二行有一个主要错字：

<html xmlns="http://www.w3.org/1999/xhtml" style=" height:100%; width:100%; background:yellow; " >

那里style做了什么？

最好使用validator.w3.org检查您的网页，因为它会发现类似的情况。（还有其他验证器。）

Answer 2

我已经解决了我添加这个元素的问题，与你的元素有点不同。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

此外，您可能想查看此帖子，但您需要以某种方式更改元标记以使其与XHTML兼容

Compatibility and Standards View

希望有所帮助

IE9 HTML元素使用Min-Width Child Div调整Bug大小

2 个答案: