小寫Ĵ切尾關

2014-02-13 31 views 1 likes

出於某種原因，當我把一個小寫字符Ĵ一個span裏面，它切斷了尾巴。您可以通過更改懸停時的字體顏色輕鬆地看到此情況。我在OSX和Safari 7.0.1的Chrome 32上測試了這個功能。小寫Ĵ切尾關

HTML

<body> 
    <span>j</span> 
</body>

CSS

body { 
    font-size:30em; 
    text-align:center; 
} 
span:hover { 
    color:red; 
}

爲什麼會發生這種事，我能做些什麼來解決這個問題？

2014-02-13 jacksondc

什麼瀏覽器？在Windows上的Chrome 32和Firefox 26下看起來很好。 – cobbal

我在Mac和Safari 7.0.1的Chrome 32上試過了。 – jacksondc

你應該在問題本身包含相關的HTML和CSS（一個jsfiddle是一個很好的額外的，但不夠），並確定測試過的瀏覽器。 –

回答

發生這種情況是因爲跨度是內聯元素;爲什麼它只在:hover上做到這一點，我不知道。我無法通過快速搜索找到任何內容，因此我只能猜測，可能文字部分位於span和:hover之外，不會在元素外展開。

你可以做一些事情來解決這個問題：

2014-02-13 19:19:41 brouxhaha

我不能使用塊級元素，但'line-height'技巧工作正常。但是，它會隨着轉換而中斷：http://jsfiddle.net/bRs3Q/4/。有任何想法嗎？ – jacksondc

http://jsfiddle.net/bRs3Q/6/：你可以添加'padding'（'20px'可以在這裏工作，但很可能基於你使用的字體以及字符是如何呈現的）。我添加了背景顏色來顯示包含文本的跨度發生了什麼，這支持了我上面的理論。爲此，填充也被註釋掉了。 – brouxhaha

相關問題