如何在瀏覽器中標準化中文字符的上邊距

我正在開發一個網站，其中包含用於學習漢字的存儲卡。問題是IE瀏覽器渲染的字體比我測試過的其他瀏覽器略高。這通常不是什麼大問題，但使用閃卡時，字體非常大，以至於放置的差異變得非常明顯。如何在瀏覽器中標準化中文字符的上邊距

我在這裏上傳了一個虛擬版本的網頁：http://mandaclu.com/dummy/flashcard.html。在Firefox/Chrome和IE中打開鏈接以查看區別（要查看具有相同問題的非常簡單的頁面，請使用此鏈接：http://mandaclu.com/dummy/test.html）。

我已經找遍了所有，並沒有找到任何方法讓這個角色坐在頁面上的相同位置，無論瀏覽器如何。有沒有人有任何想法？（CSS重置也沒有工作）謝謝你可以提供任何幫助。

來源

2013-11-09 David

你試過CSS正常化嗎？ –

我剛纔在這兩個頁面（flashcard.html和test.html）中都添加了這個，並且放置位置仍然相同。 – David

您正在測試哪個版本的Firefox/Chrome/IE？ –

看起來像IE和其他瀏覽器使用line-height> text-size呈現文本的方式有所不同。

嘗試設置line-height = text-size並添加頂部填充以強制文本向下。

例如。

#char { 
    display: inline-block; 
    font-size: 180px; 
    line-height: 180px; 
    margin: 0; 
    padding: 30px 0 0 0; 
    position: relative; 
    vertical-align: bottom; 
    width: 260px; 
    }

來源

2013-11-12 01:33:13

謝謝。我嘗試過，但沒有奏效。它只是在兩個瀏覽器中將字符向下移動30px。所以在定位上仍然存在差異。 – David

如何在瀏覽器中標準化中文字符的上邊距

回答

相關問題