如何修复小页面使其在 IE7 中正确显示？ (2)答案

【问题标题】：How to fix a small page so it displays correctly in IE7? (2)如何修复小页面使其在 IE7 中正确显示？ (2)
【发布时间】：2011-11-11 04:50:45
【问题描述】：

我已经删减了很多代码。所需的代码如下。这是一个小的 html 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML >
<HEAD>

</HEAD>
<BODY>
<DIV style="border:1px solid #000;">
    <SPAN style="MARGIN-LEFT:20px;">
        Previous
    </SPAN>
    <SPAN style="FLOAT:right; MARGIN-RIGHT:20px;">
        Next
    </SPAN> 
</DIV>
</BODY>
</HTML>

我只想在同一行显示上一个和下一个。它在 IE7 中看起来低于另一个，但在 FF 和 Opera 中还可以。 Chrome 尚未经过测试。另外，当我删除 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">, 然后 Opera 也会显示这两个单词不在一行中。我想要的只是在 div 和一行中的左侧显示单词“Previous”和右侧显示“Next”。

修复它的最佳方法是什么？谢谢。

【问题讨论】：

标签： html internet-explorer-7

【解决方案1】：

好的，目前我面前没有所有这些浏览器，但您可以通过将float: left 添加到第一个跨度来解决问题。另外，我会假设您的其他一些代码会处理此问题，但是对于您的小示例，这里有一些您可能需要的其他样式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML >
<HEAD>
</HEAD>
<BODY>
<DIV style="border:1px solid #000; overflow: hidden; width: 100%;">
    <SPAN style="clear: left; FLOAT:left; MARGIN-LEFT:20px;">
        Previous
    </SPAN>
    <SPAN style="clear: right; FLOAT:right; MARGIN-RIGHT:20px;">
        Next
    </SPAN> 
</DIV>
</BODY>
</HTML>

并不是我们在包含的 div 上设置了宽度和溢出值。在大多数用例中，明确的价值并不重要。您可以酌情使用不同的宽度和溢出值（例如 50% 和 auto）。

如需更多信息和您可能需要进行的一些额外调整，see this article。如果我手头有 IE7 的副本，我会为你测试它，但你应该很接近。

来自文章：

需要使用宽度或高度声明来使效果在资源管理器 Windows 和 Opera 中工作。如果你不包括它资源管理器 Windows 继续在顶部显示边框列，好像没有溢出一样。 Opera 完全隐藏容器的内容。

【讨论】：

感谢您的帖子。我刚刚测试过了。现在 IE7、FF、Opera 在 div 中显示“Previous”和“Next”这两个词。现在 div 不是一个矩形，而只是该单词上方的一条水平线。
@Haradzieniec 将溢出值（自动或隐藏）添加到封闭的 div
谢谢。溢出：自动；或 overflow:hidden for div 有助于 FF 和 Opera，但不适用于 IE7。 IE7 将两个单词都显示在 div 之外。
@Haradzieniec 我为你添加了一些关于 IE7 兼容性的更多细节
谢谢！！！我关注了那篇文章。添加了“宽度：100%；”。到处工作。此外，您不需要“clear:left;”和“明确：正确”；非常感谢！