0

我正在使用应该给左侧边框的指针图像发出错误消息。你可以在这里看到一个例子。

我目前的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 和 Opera 中有效，但在 IE9 中无效。

如果不清楚：框应该与三角形图像完全对齐。

4

2 回答 2

1 
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;
}

通常，如果您使 line-height 与您的内容区域高度匹配，则文本将垂直对齐。

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

我在 IE 中查看，它看起来不错。

于 2013-03-01T22:46:08.377 回答
1 
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-01T23:13:41.353 回答