0

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

<!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 文件，则此错误不会出现丑陋的头部。在这种情况下，我冒昧地将此代码上传到我的测试服务器，以便任何有礼貌的人帮助我弄清楚发生了什么。

在http://pace-testing.net84.net查看页面

如果有人有任何可能有用的信息，我将不胜感激。这包括 (1) 修复 (2) 解决方法或 (3) 实现目标的更好方法。如果您有任何问题，请告诉我，因为我会经常查看这篇文章（我正在为这篇文章拉头发，所以我急于修复它）。

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

4

2 回答 2

1

除非我打开兼容模式（地址栏中的页面图标损坏），否则我看不到在 IE9/W7x64 中发生这种情况。也许你不小心打开了它？

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

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

里面在style做什么？

使用validator.w3.org检查您的页面是个好主意，因为它会发现类似的内容。（还有其他验证器。）

于 2012-08-11T13:45:20.843 回答
0

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

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

此外，您可能想查看这篇文章，尽管您需要以某种方式更改元标记以使其与 XHTML 兼容

兼容性和标准视图

希望能帮助到你

于 2012-08-24T15:08:10.710 回答