我正在使用 AjaxControlToolkit 版本 3.0.20299.9 中的 ValidatorCalloutExtender。验证发生在设置了 resizable=0 的浏览器窗口中。弹出框大部分位于可视窗口之外 - 位于右侧。
使用 AjaxControlToolkit 版本 1.0.10618.0 已正确定位。它实际上漂浮在文本框上，弹出窗口的右侧就在可视窗口的右侧，边距约为 5px。由于我们升级了 AjaxControlToolkit 的版本，它的呈现方式似乎有所不同。有谁知道我需要做什么才能使弹出窗口正确定位？我一直在玩 .ajax__validatorcallout_* css 类，但我更改的所有内容似乎真的搞砸了显示。
【问题讨论】：
标签： asp.net asp.net-ajax
所有浏览器都会出现这种情况吗？ IE6 以呈现问题而闻名，我强烈建议使用其他东西。 IE7、FF、Safari，除了 IE6。
验证器是否放置在外部 div 中？检查外部 div 的 CSS。
【讨论】：
我想出了这个。以为我会为任何感兴趣的人发布答案。 AjaxControlToolkit 的两个版本之间的呈现是不同的。为了重新定位 ValidatorCallout 窗口，我发现以下方法效果最好。
您必须覆盖工具包使用您自己的自定义样式生成的所有 .ajax__validatorcallout_* css 类。这很奇怪，但似乎您必须覆盖每种样式才能使其正常工作。我使用 firefox web dev 工具栏发现正在生成的样式，然后按如下方式覆盖它们。
<style>
.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;}
</style>
注意：我将第一个 .CustomValidator {position:relative;margin-left:-80px;} 行添加到生成的类中。我还打破了 .CustomValidator div、.CustomValidator td 以便我可以添加 position:relative;到 div 而不是 td。 margin-left:-80px 是我需要向左移动所有内容。
然后将 CustomValidator CssClass 粘贴到您的 ValidatorCalloutExtender 中：
<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="MyValidatorControl" CssClass="CustomValidator">
【讨论】：