2010-12-15 6 views
0

IEとFireFoxのdoctypes(おそらく)を宣言するのに問題があるようです。Doctypeの問題がIEの行の高さや改行を混乱させる可能性がある

これは、私はスクリーンショットで見られる問題を抱えているコードです:

<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:[email protected]?subject=Hello superallan!&body= ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[email protected]</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です:

<!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のためだけに問題を解決する方法を教えてください。

答えて

0

line-heightのスタイルではptを使用しています。

ptは、印刷されたページでの使用を目的としており、画面上に正確に表示されないことに注意してください。ピクセル精度の正確なフォントサイズを画面に表示するには、代わりにpxを使用します。 (相対測定にはemまたは%を使用することもできますが、固定サイズ測定を使用するように見えるので、pxがその1つです)。

だけのピクセルは、フォント・サイズ、ポイントのモニター上のデッド正確であるかのように:http://css-tricks.com/css-font-size/

は、リンク先のページの関連セクションから引用すると:

詳細情報については、こちらのページをご覧くださいサイズは紙では正確ではありません。ページを印刷する際の最良のクロスブラウザとクロスプラットフォームの結果を得るには、印刷スタイルシートを設定し、すべてのフォントをポイントサイズでサイズ調整します。

スクリーンの表示にポイントサイズを使用しない理由は、クロスブラウザーの結果が大きく異なることです。

...まさにあなたが見ている症状のように聞こえます。

希望に役立ちます。

関連する問題