Doctype問題可能會搞亂IE中的行高和換行符

Question

我似乎在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

當我將doctype更改為strict時，在FF中看起來仍然不錯，但是IE使行高更大。

有任何想法嗎？ 或可能-如何僅針對IE來修復它，因為它在其他方面工作正常...

Answer 1

我注意到您正在為font-size和line-height樣式使用pt度量。

請注意， pt是用於打印頁面的，不能在屏幕上准確顯示。 如果要在屏幕上獲得像素完美的准確字體大小，請改用px 。 （您也可以使用em或%進行相對測量，但看起來您打算使用固定大小的測量，因此px是一個）。

有關更多信息，請參見以下頁面： http : //css-tricks.com/css-font-size/

要引用鏈接頁面的相關部分：

就像在字體大小監視器上像素精確到極點一樣，磅值在紙張上也精確到極點。 為了在打印頁面時獲得最佳的跨瀏覽器和跨平台結果，請設置打印樣式表並使用磅值來調整所有字體的大小。

出於良好的考慮，我們不使用點大小進行屏幕顯示（除了它是荒謬的）的原因是，跨瀏覽器的結果大不相同。

...聽起來確實像您所看到的症狀。

希望能有所幫助。

Doctype問題可能會搞亂IE中的行高和換行符

問題描述

1 個解決方案

解決方案1
0 2010-12-15 17:06:23

Doctype問題可能會搞亂IE中的行高和換行符

問題描述

1 個解決方案

解決方案1 0 2010-12-15 17:06:23

解決方案1
0 2010-12-15 17:06:23