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>

まず第一に、コードは少し乱雑に見えます。スパンを 2 ピクセル上に配置しなければならないのは少し奇妙です。それにもかかわらず、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;
}

通常、行の高さをコンテンツ領域の高さと一致させると、テキストは垂直方向に配置されます。

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 に答える