ValidatorCalloutExtender 未正确呈现 CSS

Question

我在 RequiredFieldValidator 上使用 ValidatorCalloutExtender 并决定将样式从默认更改为更多 'Modern UI'。我找到了一个 Wonderful Post，它帮助我获得了所有相关的 CSS 字段。我着手改变风格，对结果非常满意。我在 IE、Chrome 和 FireFox 中进行了测试，它们运行良好。然后我在生产服务器上安装并注意到 CSS 没有正确呈现，无论我使用哪种浏览器。

http://s14.postimg.org/gn5kjgovl/Rendered_Differently.png 示例图片

我在下面包含了我的 CSS（以防万一我做错了什么）。

/* AjaxControlToolkit Validator */
.validatorCalloutHighlight 
{
 border:solid;
 border-color: #FFCC00;
    /*background-color: lemonchiffon;*/ 
}
.ajax__validatorcallout_popup_table
{
 /*position:absolute;*/
 min-width: 350px;
 min-height: 40px;
 /*padding: 8px;*/
 background: #FFCC00;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 margin-left:250px;
 margin-top:-20px;
 color:black;
}
.ajax__validatorcallout_popup_table:after
{
 content: '';
 position:absolute;
 border-style: solid;
 border-width: 20px 20px 0 0;
 border-color: #FFCC00 transparent transparent transparent;
 display: block;
 width: 0;
 bottom: -20px;
 left: 0px;
}
/* The popup table row */
.ajax__validatorcallout_popup_table_row
{

}
/* The callout cell */
.ajax__validatorcallout_callout_cell
{

}
/* The table in the callout cell */
.ajax__validatorcallout_callout_table
{

}
/* The callout table row */
.ajax__validatorcallout_callout_table_row
{

}
/* The error message cell */
.ajax__validatorcallout_error_message_cell
{

}
/* The warning icon cell */
.validator_callout .ajax__validatorcallout_icon_cell
{
 padding:0px;
}
.validator_callout .ajax__validatorcallout_icon_cell img
{
 /* Remove the 'Warning' icon */
 display: none;
}
/* The close button cell */
.ajax__validatorcallout_close_button_cell
{

}
/* The arrow cell */
.ajax__validatorcallout_arrow_cell
{
 display:none;
}
/* Inner div of a cell. Used in the close button */
.ajax__validatorcallout_innerdiv 
{

}

ASP代码如下

<asp:TextBox ID="txtUsername" runat="server" Width="300px"></asp:TextBox>
                                    <asp:RequiredFieldValidator CssClass="validator_callout" ID="reqvalUsername" runat="server" ControlToValidate="txtUsername" Display="None" ErrorMessage="Enter a new login name" ValidationGroup="Submit">*</asp:RequiredFieldValidator>
                                    <cc1:ValidatorCalloutExtender ID="reqvalUsername_ValidatorCalloutExtender" runat="server" CloseImageUrl="~/Images/Buttons/cancel_Validator.png" HighlightCssClass="validatorCalloutHighlight" TargetControlID="reqvalUsername" PopupPosition="TopRight" WarningIconImageUrl="~/Images/Status/clear.png">
                                    </cc1:ValidatorCalloutExtender>

我什至用自定义 header 改变了 web.config，但这并没有解决我的问题。 CSS renders differently on web server than on development environment

我非常想使用新的样式，感觉它只是我忽略的一些小东西，但我不知道如何解决这个问题。有人可以帮助解决这个令人沮丧的问题吗？

Answer 1

向上 CSS，试图查看我所做的任何更改是否有任何不同，但没有。我尝试过的任何方法都无法删除默认的 LemonChiffon 通知...直到我发现这个 post 隐藏在 interwebz 上。 http://amityug.org/wordpress/ziems/2014/12/19/how-to-re-position-the-asp-net-ajax-validatorcalloutextender/。我不知道那篇文章是谁写的，但我感谢你花时间写这篇文章 post！

具体来说，包含的 CSS 完全覆盖应用于 ValidatorCalloutExtender 的默认值 css。

.CustomValidator {position:relative;margin-left:-80px;}    
.CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; position:relative;}    
.CustomValidator td {border:solid 1px Black;background-color:LemonChiffon;}    
.CustomValidator .ajax__validatorcallout_popup_table {display:none;border:none;background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_popup_table_row {vertical-align:top;height:100%;background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_callout_cell {width:20px;height:100%;text-align:right;vertical-align:top;border:none;background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_callout_table {height:100%;border:none;background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_callout_table_row {background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_callout_arrow_cell {padding:8px 0px 0px 0px;text-align:right;vertical-align:top;font-size:1px;border:none;background-color:transparent;}    
.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {font-size:1px;position:relative;left:1px;border-bottom:none;border-right:none;border-left:none;width:15px;background-color:transparent;padding:0px;}    
.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div {height:1px;overflow:hidden;border-top:none;border-bottom:none;border-right:none;padding:0px;margin-left:auto;}    
.CustomValidator .ajax__validatorcallout_error_message_cell {font-family:Verdana;font-size:10px;padding:5px;border-right:none;border-left:none;width:100%;}    
.CustomValidator .ajax__validatorcallout_icon_cell {width:20px;padding:5px;border-right:none;}    
.CustomValidator .ajax__validatorcallout_close_button_cell {vertical-align:top;padding:0px;text-align:right;border-left:none;}    
.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none;text-align:center;width:10px;padding:2px;cursor:pointer;}

包含我的验证器样式的最终结果

/* AjaxControlToolkit Validator */
.validatorCalloutHighlight 
{
    border:solid;
    border-color: #FFCC00;
    /*background-color: lemonchiffon;*/ 
}
.CustomValidator
{
    position: absolute;
    /*margin-left: -80px;*/
    /*left:-200px;*/
}
.CustomValidator div
{
    border: none;
    background-color: #FFCC00;
    position: relative;
    color:black;
}
.CustomValidator td
{
    border: none;
    background-color: #FFCC00;
    color:black;
}
.CustomValidator .ajax__validatorcallout_popup_table
{
    display: none;
    border: none;
    background-color: transparent;
    padding: 0px;
}
.CustomValidator .ajax__validatorcallout_popup_table_row
{
    vertical-align: top;
    height: 100%;
    background-color: transparent;
    padding: 0px;
}

.CustomValidator .ajax__validatorcallout_callout_cell
{
    text-align: right;
    vertical-align: top;
    border: none;
    background-color: transparent;
    padding: 0px;
}

.CustomValidator .ajax__validatorcallout_callout_table
{
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 0px;
}

.CustomValidator .ajax__validatorcallout_callout_table_row
{
    background-color:transparent;
    padding: 0px;
}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell
{
    padding: 8px 0px 0px 0px;
    text-align: right;
    vertical-align: top;
    border: none;
    background-color: transparent;
}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
    position: relative;
    left: 1px;
    border-bottom: none;
    border-right: none;
    border-left: none;
    width: 15px;
    background-color: transparent;
    padding: 0px;
}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
    height: 1px;
    overflow: hidden;
    border-top: none;
    border-bottom: none;
    border-right: none;
    padding: 0px;
    margin-left: auto;
}

.CustomValidator .ajax__validatorcallout_error_message_cell
{
    min-width:200px;
    max-width:275px;
    min-height:40px;
    padding: 10px 5px 10px 20px;
    border-right: none;
    border-left: none;
    width: 100%;
    font-size: medium;
}


.CustomValidator .ajax__validatorcallout_error_message_cell:after
{
    content: '';
    position:absolute;
    border-style: solid;
    border-width: 0px 20px 20px 0px;
    border-color: transparent #FFCC00 transparent transparent;
    display: block;
    width: 0;
    top:0px;
/*  bottom:55px;*/
    left: -5px;
}

.CustomValidator .ajax__validatorcallout_icon_cell
{
    width: 20px;
    padding: 5px;
    border-right: none;
    display:none;
}

.CustomValidator .ajax__validatorcallout_close_button_cell
{
    vertical-align: top;
    padding-top: 7px;
    padding-right:30px;
    text-align: right;
}

.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
    border: none;
    text-align: center;
    width: 10px;
    padding: 2px;
    cursor: pointer;
}

ValidatorCalloutExtender 未正确呈现 CSS

ValidatorCalloutExtender not render CSS properly

css

asp.net

ajaxcontroltoolkit