在</p> <div> </div> </label>内的<p>内设置<label>样式

Question

我在设计AJAX回调消息框时遇到了一些问题。正如您所看到的那样，样式在Internet Explorer中很有效，但在Chrome中却不行。可以这么说，我看不到树木。这是我的HTML：

<div id="CallbackMessage">
    <p>
        <label id="uiLblCallbackErrMsg" class="CallbackMsg" runat="server">&nbsp</label>
    </p>
</div>

这是我的CSS：

.CallbackErrorMessage
{
    margin: 0 25 4 20;
    height: 10px;
    font-family:Arial;
    font-size:12px;
    background-color: #FDC68A;
    border: 1px solid #F7977A;
    color: Red;    
}

使用jQuery我按下按钮时将CallbackErrorMessage类添加到<div id="CallbackMessage">！

我无法看到错误，任何建议都表示赞赏。

看看这两张图片：

Answer 1

CSS

出错

.CallbackErrorMessage
{
    margin: 0 25 4 20;
    height: 10px;
    font-family:Arial;
    font-size:12px;
    background-color: #FDC68A;
    border: 1px solid #F7977A;
    color: Red;    
}

您保留了CSS的像素值。

margin: 0 25 4 20;

将以上内容替换为：

margin: 0 25px 4px 20px;

你需要清除花车！

将overflow: hidden;赋予.CallbackErrorMessage样式。

由于您引用的是ID而不是类，因此它应该是：

#CallbackErrorMessage

 

的问题

此外，&nbsp应替换为 。你错过了分号。

最终CSS

#CallbackErrorMessage
{
    margin: 0 25px 4px 20px;
    height: 10px;
    font-family:Arial;
    font-size:12px;
    background-color: #FDC68A;
    border: 1px solid #F7977A;
    color: Red;
    overflow: hidden;
}

---

从height

中删除#CallbackErrorMessage

height: 10px;

将其删除或将其更改为height: auto;。

Answer 2

调用类名是完全错误的。您在html中使用id="CallbackMessage"并为.CallbackErrorMessage

撰写样式

像这样改变css，

    #CallbackMessage
{
    margin: 4px 25px 4px 20px;
    height: auto; padding:10px;
    font-family:Arial;
    font-size:12px;
    background-color: #FDC68A;
    border: 1px solid #F7977A;
    color: Red; 
}

DEMO