爲什麼不是這個CSS：三角形顯示正確後？

我想做一個CSS：通常的方式後三角形。但它看起來並不如三角形可言，請參閱http://jsfiddle.net/lborgman/eX3HL/：爲什麼不是這個CSS：三角形顯示正確後？

/* triangle after */ 
#st:after { 
    position: relative; 
    margin-left: 10px; 
    content:""; 
    border-top:4px solid transparent; 
    border-bottom:4px solid transparent; 
    border-left:4px solid black; 
} 

#st { 
    line-height: 2em; 
}

如果我改變「的立場：相對」到「的位置是：絕對的」三角將成爲一個三角形。但是，這並不適用於我想要的地方（因爲它在浮動div上）。

我該怎麼辦？

來源

2014-02-25 Leo

感謝縮進編輯，@BoltClock。我能不能以某種方式爲我做這件事？ – Leo

那不是我的編輯，那是@ Adrift的。我只是刪除了一些不需要在那裏的標籤。 – BoltClock

謝謝，我應該更加小心。它看起來像寬度和高度也可以刪除。（我會這樣做的。） – Leo

添加display:inline-block修復三角

#st:after { 
    position: relative; 
    margin-left: 10px; 
    content:""; 
    border-top:4px solid transparent; 
    border-bottom:4px solid transparent; 
    border-left:4px solid black; 
    display: inline-block; 
}

JS小提琴：http://jsfiddle.net/eX3HL/2/

來源

2014-02-25 01:03:57

哦，真是一個驚喜的解決方案！它有效，但你是如何發現的？ – Leo

@Leo內聯元素沒有高度或寬度，所以爲了使高度和寬度達到內嵌塊所需的高度和寬度，塊將不起作用，因爲它將在新行中。 –

啊，那很好！ – Leo

它具有與對象的本地顯示做一個現象。 span的本地display財產是inline。內聯元素的行爲與純文本類似，而塊元素的行爲更像圖像。

在您的示例中，如果您未覆蓋span的默認屬性，則您的元素的行爲與文本類似，因此也有font-size shadow屬性，它被設置爲inherit。這是一種意想不到的行爲，因爲shadow-properties直接對開發人員不可見，所以造成了很多不文明。你不必相信我的話，這裏是一個證明：http://jsfiddle.net/eX3HL/5/

來源

2014-02-25 01:26:26 Bright

感謝您的澄清。我對此一無所知。上面的@Kevin解決方案似乎更容易，因爲我猜想沒有內聯塊的繼承大小。或者，也許有？（但什麼是「影子屬性」？） – Leo

當你創建一個div時，你不必指定它是一個塊元素，瀏覽器的渲染引擎就有一組內置的默認屬性，當你沒有被你重寫時手動影響你的DOM。問題在於那些開發人員不直接看到什麼導致了很多混淆，我把它們稱爲影子屬性，因爲它們位於「瀏覽器內部」，並且對每個人都是隱藏的。 @凱文解決這個問題很好，只要<= IE8的支持無所謂，你可以同時使用這兩種解決方案。 – Bright

我明白了，謝謝。我不打算支持超過標準（以及我需要的新興標準）。我必須儘量減少工作，這樣我才能專注於重要的事情。 – Leo

爲什麼不是這個CSS：三角形顯示正確後？

回答

相關問題