Question

我创建了一个简单的page，其中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;

我知道你可能希望这条线在所有浏览器中都能适用，但实际上，它并不是那么简单。如果我作为用户将窗口缩小到常见粘滞便笺的大小，该怎么办？当然，我不希望它是非常清晰的，但是，你的网页在这些大小限制下的表现如何（尽管有点辛苦）完全可定制，并且许多效果取决于如何您可以设置元素的宽度和高度（对于intance，使用px或百分比）。我的建议是抓住其他专业网站，开始调整窗口大小，看看他们是如何处理的。

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

Answer 2

尝试明确设置div的行高。

line-height: 14px;

字体在IE和Firefox上的表现不同

2 个答案: