垂直對齊應該應用於孩子嗎？

這個屬性是否也會影響它應用到的元素的子元素？垂直對齊應該應用於孩子嗎？

span{ 
vertical-align:top; 
font-size:27px; 
border-bottom: 1px solid red; 
} 
a{ 
    border-bottom: 1px solid green; 
} 

<span> 
    <a>Hi ho hoh ho</a> 
    Hi ho hoh ho 
    <a>Hi ho hoh ho</a> 
</span>

在Firefox的屬性不會影響孩子，但在Chrome孩子是錯位的。

鉻： Chrome

火狐： Firefox

什麼是良好的實施？

來源

2012-09-17 Yacine Zalouani

檢查此琴：

http://jsfiddle.net/5XMk8/7/

添加的所有文字中的「一」的標籤，並給float:left，並使其display:block

來源

2012-09-17 11:11:24 supersaiyan

謝謝，但我不想要這種骯髒的把戲。 –

這不是髒伎倆，因爲「a」標籤不是默認塊，所以懸停會在塊上工作，或者您也可以使用浮動 – supersaiyan

通過規範，vertical-align是不能繼承的，但它可能會影響到內部元素的基線水平。不過，瀏覽器在這個屬性的古怪和不同的實現方面有很長的歷史。

使用您的確切代碼進行測試，我在Chrome（22beta）上看到的效果與Firefox上的相同，因此您可能在某些舊版本中遇到了一些問題。

要查看瀏覽器之間的明顯差異，請使用不同的字體大小。結果將更難解釋。無論如何，士氣是在大多數情況下我們應該避免使用vertical-align。使用相對定位往往會產生更一致的結果。

來源

2012-09-17 14:39:55

感謝您的回覆，但我使用的是Chrome 22和Firefox 15. –

當前發行版Chrome是21.如果您在Chrome 22beta的屏幕截圖中看到結果，那麼這可能是一個安裝問題或字體渲染問題，可能取決於設備或設置。您的jdsfiddle在我的Chrome 22.0.1229.56 beta-m（Win 7）上沒有出現問題。 –

你是對的我只是在其他計算機上試過，並沒有出現問題。我將嘗試重新安裝Chrome –

垂直對齊應該應用於孩子嗎？

回答

相關問題