當跨度被封鎖+絕對定位時，文本對齊的行爲不同

我已經完成了一些搜索，但找不到我正在尋找的答案。如果它是重複的，請讓我在我應該前往的地方。當跨度被封鎖+絕對定位時，文本對齊的行爲不同

不管怎樣，我一直無法找出跨度的繼承（如果有的話）行爲，而且一旦我開始在跨度中進行不同風格的組合，Firefox和Chrome似乎有所不同。我有一個常規的內聯，絕對定位，以文本爲中心的跨度容器，其中包含兩個跨度，一個內嵌式，絕對定位（class =「arrow」）和一個阻塞的跨度（class =「text」）。在Chrome中，箭頭類跨度在容器內左對齊。但是，在FF11中，箭頭類跨度在容器內居中對齊。

所以，我的問題是：

爲什麼箭頭級跨度行爲不同瀏覽器和FF11（FF7有出於某種原因，Chrome的行爲）？
哪個瀏覽器顯示「正確」跨度繼承屬性？
我可以讓兩個瀏覽器的行爲以相同的方式使文本類跨度成爲內聯塊，但我不明白爲什麼這將有助於...
由於文本級跨度是阻塞跨度，它不應該導致容器類跨度（及其邊界）爲100％寬度嗎？目前，容器類圍繞文本類跨度進行摺疊。（這可能會在一個單獨的線程中，但如果我可以快速回答這個問題，那將會很好）。

DisplayProps.html：

<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="displayProps.css"> 
    </head> 
    <span class="container"> 
     <span class="arrow"></span> 
     <span class="text">Why is the arrow different?</span> 
    </span> 
</html>

displayProps.css：

span.container { 
    display: inline; 
    position: absolute; 
    border: 2px solid; 
    text-align:center; 
} 

span.container span.arrow { 
    border-color: transparent black transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 10px 0; 
    display: inline-block; 
    position: absolute; 
} 

span.container span.text { 
    display: block; 
}

幫助感激，謝謝！

來源

2012-03-21 DKT

箭頭的位置是絕對的，但您尚未定義頂部/底部和左/右值。因此，瀏覽器採用其默認值，這是不同的。

添加例如下面的代碼，他們應該有相同的位置：

span.container span.arrow { 
    ... 
    top: 10px; 
    left: 10px; 
}

另見this example。

=== UPDATE ===

如果改變容器相對定位和顯示塊，寬度爲100％。

span.container { 
    display: block; 
    position: relative; 
    ... 
}

查看updated example。

P.s .:僅在定義距離時使用絕對位置。

來源

2012-03-21 07:14:13 scessor

啊我明白了！那麼，瀏覽器的這些默認值是否依賴於容器跨度中的「text-align：center」？看起來如果我從容器跨度中移除「text-align：center」，箭頭又會回落到左側。 – DKT 2012-03-21 07:24:45

是的，他們可以。只使用位置絕對距離（這就是使用絕對的原因，否則使用相對）。 – scessor 2012-03-21 07:31:45

另請參閱我更新的答案。 – scessor 2012-03-21 07:33:10

當跨度被封鎖+絕對定位時，文本對齊的行爲不同

回答

相關問題