【发布时间】：2012-03-15 01:30:54
【问题描述】：
我在 Chrome 17.0.963.56 中遇到了一个非常奇怪的错误。以下是截图：
当页面首次呈现时，Salutation 组合框看起来不错。但是，一旦您选中上面的复选框，就会出现奇怪的图像。单击页面上的任意位置会使其消失。取消选中该框会使其再次出现。我试图在 jsfiddle 中重现，但不能。
我找到了 2 种不同的方法来消除此错误。第一个与组合框的 HTML 和 CSS 结构有关：
<div class="field ui-helper-clearfix @Html.IdFor(m => m.Salutation)-field">
<span class="label">
@Html.LabelFor(m => m.Salutation)
</span>
<div class="input">
<div class="combobox">
<div class="text-box input">
@Html.EditorFor(m => m.Salutation)
</div>
<a class="text-box down-arrow">
<img class="text-box down-arrow" alt=""
src="/content/icons/transparent.png">
</a>
<div class="autocomplete-menu">
</div>
</div>
<div class="messages">
<div class="top callout border">
<div class="top callout bg">
</div>
</div>
<span class="validation">
@Html.ValidationMessageFor(m => m.Salutation)
</span>
</div>
</div>
</div>
.combobox .text-box.input {
position: absolute;
left: 0;
right: 20px;
border-right-color: transparent; /* was border-right-width: 0; */
border-right-width: 0;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
基本上，边框来自输入元素周围的 div 包装器。输入本身没有边框。对于普通文本框包装器，边框半径为 5px。但是对于组合框，我覆盖了该 CSS 值以使右上角和右下角的半径为零。这是为了让它融入组合框的下拉箭头元素中。
当我完全删除文本框包装器上的右边框时（使用border-right-width: 0;），出现异常。当我改为保留右边框并给它一个透明的背景颜色时，异常就消失了。
但我也发现删除 /content/themes/base/jquery.ui.all.css 后问题就消失了。 反复试验导致我在 jquery.ui 中找到以下行。主题.css：
.ui-widget :active { outline: none; }
当我删除此行或将其更改为 .ui-widget:active { outline: none; }（请注意小部件和 :active 之间没有空格）时，问题也消失了——即使文本框包装器的右边框宽度为零。
在 Firefox、IE 或 Safari 5.1.1 (7534.51.22) 中不会出现此问题，仅在上述 Chrome 版本中出现。所以它似乎可能是一个 Chrome 错误。
我以前从未见过与这样的空格一起使用的状态选择器。大多数时候，像 :hover、:link、:active 之类的东西都紧跟在选择器之后。上面的 jQuery UI 选择器是否意味着“将大纲：无；应用于嵌套在 .ui-widget 元素下的所有 :active 元素”？或者它是否意味着“将大纲：无；应用于所有 :active .ui-widget 元素”？如果通过删除 .ui-widget 和 :active 之间的空格没有区别，我更喜欢该解决方案而不是使文本框包装器右边框透明而不是使其宽度为零。
另一个奇怪的事情是后缀组合框不受影响——但它使用与称呼组合框相同的 CSS 和 HTML 结构。奇怪...
【问题讨论】：
标签： asp.net-mvc jquery-ui google-chrome css