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问题 - 将一个跨度对齐到另一个

回答

相关问题