【发布时间】:2015-03-21 00:04:21
【问题描述】:
我在RequiredFieldValidator 上使用ValidatorCalloutExtender 并决定将样式从默认更改为更“现代的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>
我什至用自定义标题更改了 web.config,但这并没有解决我的问题。 CSS renders differently on web server than on development environment
我非常想使用新样式,感觉它只是我忽略的小东西,但我不知道如何解决这个问题。有人可以帮忙解决这个令人沮丧的问题吗?
【问题讨论】:
标签: css asp.net ajaxcontroltoolkit