Question

如果您运行的简单HTML页面位于：

http://ss.bigwavesoftware.net/2.htm

在IE8和FireFox 3.5.8中，DIV的显示方式不同。在IE中，它们表现为块元素，FireFox表现为内联元素。我需要它们在两种浏览器中都表现为内联。有人可以建议一种解决方法，使它们在IE8和FireFox中显示内联吗？

<html>
<body>
    <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

Answer 1

颠倒div的顺序，它会起作用。这是第一个第二个，第二个是第一个在标记中。

<html>
<body>
     <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
     <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>

</body>
</html>

Answer 2

在文档的最开头添加doctype。它正在quirks mode中呈现。 E.g。

<!doctype html>
<html>
... etc.

哦，你的意思是“表现为内联”是什么意思？你只是想让它们并排显示，或者你实际上想要忽略宽度和高度（如Tom指出的那样）？因为你不能为浮动元素做后者。 display: inline对浮点数（except to fix IE6 bugs）没用，因为"inline" floats automatically turn into block。

Answer 3

您无法在内联元素上设置高度和宽度。如果您希望这些框在Firefox中布局，请移除显示：内联并浮动左侧框。

Answer 4

在第一个div中使用float：left而不是float：none（左边的那个）。

<html>
<body>
    <div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

DIV在IE和Firefox中表现不同

4 个答案: