字体在IE和Firefox上的作用不同

Question

我创建了一个简单的页面，其中有一个div包含文本，问题是当在IE中运行时，它占用了第二行，而在Firefox或Chrome中运行时它只占用了一行。

有没有办法纠正这一点，或者你认为我做错了什么？如果没有，请解释为什么会发生这种情况。

以下是html和样式

<div class="Footer">
Hi my name is Mutahar, This message was sent from Superman Computer Systems located at 1705 From, Markham, ON.

            * {
            color: #101010;
            font-family: tahoma;
            font-size: 12pt;
        }
        .Footer {
            color: #404040;
            font-family: tahoma;
            font-size: 10pt;
            padding: 20px;
            text-align: left;
            width: 700px;
        }

Answer 1

您可以使用CSS显式设置许多您可能需要考虑的事项。

首先，正如VegDork所说，你可以使用：

line-height: 14px;

然而，正如Paddyd所说，如果屏幕大小发生变化，无法容纳一行，该怎么办？也许浏览器处理此问题的默认方式不是您想要的。

你可以试试：

text-overflow: ellipsis;

如果您希望三个点显示文本的截断位置（将隐藏内容溢出父元素的单行文本，并在末尾显示三个点（…））。

或者，用于块元素：

overflow: hidden;

只是隐藏内容。

您也可以做其他事情，比如强制不换行，当与overflow或text-overflow组合时，可以强制使用某些方法来处理当元素的文本溢出时发生的情况。

white-space: nowrap;

我知道你可能希望这一行能一直适用于所有浏览器，但实际上，它并没有那么简单。如果我作为一名用户，将窗口缩小到一张普通便签的大小，该怎么办？当然，我不希望它非常清晰，然而，你的网页在这些大小限制下的行为可以（尽管有点费力）完全自定义，许多效果取决于你如何设置元素的宽度和高度（例如，用px或百分比）。我的建议是抓取其他专业网站，开始调整窗口大小，看看他们是如何处理的

然而，话虽如此，只要知道当你最终放弃让每个用户的一切看起来都完全一样的尝试时，这是非常令人耳目一新的，因为这是不可能实现的。相反，尝试使用CSS来控制元素（或其中的文本节点）在某些情况下的行为（例如，如果我将我的网站的主包装器（<div>）的宽度设置为900px，即使调整了窗口的大小，它也会保持相同的宽度，并且元素中会溢出的部分会被隐藏，但是，如果我使用一些东西，比如80%，您可以在缩小窗口宽度时观察元素的大小）。

Answer 2

尝试显式设置div的行高。

line-height: 14px;