2013-04-09 59 views
7

我在項目中使用字體「Lucida Sans Unicode」,並且遇到了問題。在IE9中,文本下方有一些空間,我不知道爲什麼會發生這種情況。在Chrome中沒有太多的空間。下面是一個例子,你看到邊境距離「選擇元素上點擊」功能在IE9開發者工具:如何使字體「Lucida Sans Unicode」在IE9和Chrome中呈現相同的方式?

IE 9 Mode

這是瀏覽器模式:IE9和文檔模式:IE9標準。

這是瀏覽器模式:IE8和文檔模式:IE8:

IE 8 Mode

正如你可以看到有 「P」 下方的空間較小。 Chrome以與IE8模式相同的方式顯示它。

渲染的不同在我想對齊東西時會造成麻煩;當在一個瀏覽器中可以正常使用時,在另一個瀏覽器中就不好。

有誰知道這是爲什麼發生,更重要的是,如何解決它?

在此先感謝所有答覆。

編輯:
小提琴:http://jsfiddle.net/94Tq9/
.

+1

這是什麼元素?你能夠搭起一個說明問題的jsFiddle嗎? – CherryFlavourPez 2013-04-09 15:05:24

+1

http://stackoverflow.com/questions/9574844/rendering-font-differs-from-ie-compared-to-ff-and-chrome – Daniel 2013-04-09 15:06:32

+2

@simpleBob這些字符的渲染方式不同,只有間距文字.. – Stian 2013-04-09 15:09:31

回答

0

好的,所以我找到了解決這個問題的方法。這絕對不是理想的,但我們組織中的其他人已經使用這種方法,所以希望它可以使用它。

的解決方案是通過添加該元標記到頭部迫使IE9成IE8「文件模式」:
<meta http-equiv="X-UA-Compatible" content="IE=8">

現在字體顯示完全相同的方式在Chrome和IE,以及我的對準問題消失了。

1

我不能告訴你爲什麼它這樣做,但值得注意的是,這是一個呈現的問題,而不是一個佈局的問題。換句話說,段落的行高不受影響,IE認爲它應該繪製邊框。 (我沒有檢查可點擊區域,對不起。)

如果您的圖片顯示,你可以添加display:inline-block;到錨風格,IE8和IE9將會只要你有line-height組呈現相同的方式。

我目前被驅逐到一個IE瀏覽器只存在(長故事),所以我不能說這是否也適用於Chrome瀏覽器。

+0

嗨,謝謝你的建議,它有所作爲!如果你看看我的OP中的小提琴,然後添加'display:inline-block; line-height:25px;''''''''''''你會看到文字邊框縮小。不過,還是有問題的。IE9和Chrome之間還是有區別的。在IE9中,下邊框位於g字符的最下部分的下方,但在Chrome中,邊框實際上位於較高的位置,因此g的低部分位於邊界之下。 Chrome上的文字上方也有更多空間。所以不幸的是,似乎我不能使用這個解決方案。 – Stian 2013-04-12 07:00:57

相關問題