Doctype 问题可能会弄乱 IE 中的行高和换行符答案

【问题标题】：Doctype issues possibly messing up line-height and line-breaks in IEDoctype 问题可能会弄乱 IE 中的行高和换行符
【发布时间】：2012-01-13 21:29:46
【问题描述】：

我在 IE 和 FireFox 中（可能）声明文档类型时似乎遇到了问题。

这是我在屏幕截图中看到的问题的代码：

<div  id="contact" style="position:absolute; left:81px; top:2440px; width:639px; ">
<span class="contact_header">Getting in touch is easy
</div>
<div style="position:absolute; left:80px; top:2500px; width:320px; ">
<br><span class="contact_title">email me:</span></br>
<br><span class="contact_links"><a class="white" href="mailto:hello@superallan.com?subject=Hello superallan!&body= ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello@superallan.com</a></span></br>
<br><span class="contact_title">tweet me:</span></br>
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@superallan</a></span></br>
<br><span class="contact_title">phone me:</span></br>
<br><span class="contact_links">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44 (0) 7540 308 682</span></br>
</div>
<div style="position:absolute; left:400px; top:2500px; width:320px; ">
<br><span class="contact_title">write to me:</span></br>
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11 abbeyview</span></br>
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;crossford</span></br>
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fife</span></br>
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scotland</span></br>
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;united kingdom</span></br>
</div>

这是我目前的文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>

这是该部分的 CSS：

    .contact_title {
 font-family:"FairfieldLTStd55Medium", Georgia, serif;
 font-size: 18pt;
 line-height: 22pt;
 color: #FFF;
}

.contact_links {
 font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
 font-size: 18pt;
 line-height: 22pt;
 color: #FFF;
}

.contact_address {
 font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
 font-size: 18pt;
 line-height: 22pt;
 color: #FFF;
}

这就是它在 Firefox 和 IE 中的呈现方式。 http://i.stack.imgur.com/l8h4q.jpg

当我将文档类型更改为严格时，它在 FF 中看起来仍然很好，但 IE 使行高更大。

有什么想法吗？或者可能 - 如何仅为 IE 修复它，因为它在其他任何东西中都可以正常工作......

【问题讨论】：

标签： html css internet-explorer firefox

【解决方案1】：

我注意到您正在为您的font-size 和line-height 样式使用pt 测量值。

请注意，pt 旨在用于打印页面，并不能准确地呈现在屏幕上。如果您想在屏幕上显示像素完美的准确字体大小，请改用px。（您也可以使用em 或% 进行相对测量，但看起来您打算使用固定尺寸测量，所以px 是其中之一）。

欲了解更多信息，请参阅此页面：http://css-tricks.com/css-font-size/

引用链接页面的相关部分：

就像像素在显示器上的字体大小是完全精确的一样，磅值在纸上也是非常精确的。为了在打印页面时获得最佳的跨浏览器和跨平台结果，请设置打印样式表并使用磅值调整所有字体的大小。

为了更好地衡量，我们不使用点大小进行屏幕显示的原因（除了它是荒谬的）是跨浏览器的结果截然不同。

...听起来确实与您所看到的症状完全一样。

希望对您有所帮助。

【讨论】：