Question

我已经削减了很多代码。所需的代码如下。这是一个小的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显示两个单词不在一行中。我想要的只是在左侧显示单词“Previous”，在div和单行中显示右侧的“Next”。

解决问题的最佳方法是什么？谢谢。

Answer 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％和自动）。

有关您可能需要进行的更多信息和一些其他调整，see this article。如果我有一份IE7的副本，我会为你测试一下，但你应该接近。

来自文章：

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

如何修复一个小页面，以便在IE7中正确显示？（2）

1 个答案:

如何修复一个小页面，以便在IE7中正确显示？ （2）

1 个答案:

如何修复一个小页面，以便在IE7中正确显示？（2）