CSS問題 - 將一個跨度對齊到另一個

我正在發出一條錯誤消息，使用應該給左側邊框的指針圖像。你可以看到一個例子here。CSS問題 - 將一個跨度對齊到另一個

我現在的CSS是：

span.arrow { 
    background-color:white; 
    background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center; 
    height:17px; 
    display:inline-block; 
} 
span.error { 
    display:inline-block; 
    padding-right:2px; 
    background-color:white; 
    margin-left:10px; 
    height:15px; 
    font-size:small; 
    border-top:1px solid #99182c; 
    border-right:1px solid #99182c; 
    border-bottom:1px solid #99182c; 
    box-shadow:5px 5px 10px #888888; 
    position:relative; 
    top:-2px; 
}

和HTML顯示錯誤：首先是

<span class='arrow'> 
    <span class='error'> 
     Errormessage. 
    </span> 
</span>

現在，代碼似乎有點亂。就像不得不將跨度放在兩個像素上有點奇怪。儘管如此，它似乎工作在Chrome，FF &歌劇，但不是在IE9。

如果不明確：盒子應該與三角形圖像完全一致。

來源

2013-03-01 jdepypere

span.arrow { 
    background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center transparent; 
    line-height:17px; 
    padding-left:10px; 
    display:inline-block; 
} 
span.error { 
    padding-right:2px; 
    background-color:white; 
    line-height:15px; 
    font-size:small; 
    border-top:1px solid #99182c; 
    border-right:1px solid #99182c; 
    border-bottom:1px solid #99182c; 
    display:block; 
}

來源

2013-03-01 23:13:41 Krisdigital

這在IE中也不能正確顯示。 – jdepypere 2013-03-01 23:17:43

抱歉沒有更新小提琴。它是http://jsfiddle.net/dshFk/6/我在IE9中檢查它 – Krisdigital 2013-03-01 23:21:28

哦，對了，我有點困惑，這是'老'小提琴。更新的似乎工作，謝謝！ – jdepypere 2013-03-01 23:25:31

span.error { 
    display:inline-block; 
    padding-right:2px; 
    background-color:white; 
    margin-left:10px; 
    line-height: 17px; 
    font-size:small; 
    border-top:1px solid #99182c; 
    border-right:1px solid #99182c; 
    border-bottom:1px solid #99182c; 
    box-shadow:5px 5px 10px #888888; 
    position:relative; 
    top:-2px; 
}

通常，如果您將行高與內容區域高度相匹配，則文本將垂直對齊。

http://jsfiddle.net/dshFk/3/

我看着在IE瀏覽器，它看起來罰款。

來源

2013-03-01 22:46:08 Leeish

這裏在IE中看起來像這樣：http://i47.tinypic.com/34yrxur.png – jdepypere 2013-03-01 22:49:48

請問你爲什麼這樣做？它是如此，你可以有一個單一的圖像和可編輯文本？用這種方法你不會有很好的結果。 – Leeish 2013-03-01 22:51:49

它看起來像小提琴。在我的小提琴看起來很好。 – Leeish 2013-03-01 22:52:59

CSS問題 - 將一個跨度對齊到另一個

回答

相關問題