Question

http://jsfiddle.net/xhydk70v/

.ui-dialog-container {
    padding:18px;
}
.ui-dialog-success-container {
    position:relative;
    top:-5px;
    left:-35px;
    border:2px solid #91e375;
    border-radius:10px;
    color:#000;
}
.ui-dialog-error-container {
    position:relative;
    top:-5px;
    left:-35px;
    border:2px solid #ff598e;
    border-radius:10px;
    color:#000;
}
.ui-dialog-success-image {
    position:relative;
    top:-20px;
    left:-17px;
    float:left;
    width:32px;
    height:32px;
    background-image: url(/public/img/icon-dialogsuccess.png);
    background-position: top left;
    background-repeat: no-repeat;
    z-index:5;
}
.ui-dialog-error-image {
    position:relative;
    top:-20px;
    left:-17px;
    float:left;
    width:32px;
    height:32px;
    background-image: url(/public/img/icon-dialogerror.png);
    background-position: top left;
    background-repeat: no-repeat;
    z-index:5;
}

<div class="ui-dialog-container">
    <div class="ui-dialog-error-image"></div>
    <div class="ui-dialog-error-container">test</div>
</div>
<br />
<div class="ui-dialog-container">
    <div class="ui-dialog-succes-image"></div>
    <div class="ui-dialog-succes-container">test</div>
</div>

有人可以向我解释为什么“成功div”没有显示边界吗？在我的实时环境中，它也没有显示图像，而错误一，就像边框一样。我相信，我疯了，因为我看不出有什么问题。

Answer 1

您的拼写错误ui-dialog-succes-container改为ui-dialog-success-container。

<div class="ui-dialog-container">
    <div class="ui-dialog-error-image"></div>
    <div class="ui-dialog-error-container">test</div>
</div>
<br />
<div class="ui-dialog-container">
    <div class="ui-dialog-success-image"></div>
    <div class="ui-dialog-success-container">test</div>
</div>

小提琴：http://jsfiddle.net/xhydk70v/1/

Answer 2

你的html中错误拼写成功

变化：

<div class="ui-dialog-container">
<div class="ui-dialog-succes-image"></div>
<div class="ui-dialog-succes-container">test</div>

到：

<div class="ui-dialog-container">
<div class="ui-dialog-success-image"></div>
<div class="ui-dialog-success-container">test</div>

没有显示的边界和背景图象

2 个答案: