Question

我遇到了Chrome 17.0.963.56的一个非常奇怪的错误。以下是截图：

enter image description here

当页面首次渲染时，Salutation组合框看起来很好。但是，只要选中上面的复选框，就会出现奇怪的图像。单击页面上的任意位置然后使其消失。取消选中该框会导致它再次出现。我试图在jsfiddle中复制，但不能。

我找到了两种不同的方法来消除这个错误。第一个与组合框的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值来给出顶部＆amp;右下角半径为零。这是为了使它融入组合框的下拉箭头元素。

当我完全删除文本框包装器上的右边框（使用border-right-width：0;）时，会出现异常。当我改为保持右边框并给它一个透明的背景颜色时，异常会消失。

但是我还发现删除/content/themes/base/jquery.ui.all.css会使问题消失。试验和错误导致我进入jquery.ui中的以下行。 theme.css：

.ui-widget :active { outline: none; }

当我删除此行或将其更改为.ui-widget:active { outline: none; }时（注意窗口小部件和活动之间没有空格）问题也会消失 - 即使文本框包装器的边框宽度为零。

Firefox，IE或Safari 5.1.1（7534.51.22）中不会出现此问题，仅适用于上述Chrome版本。所以它似乎可能是一个Chrome错误。

我以前从未见过像这样的空间使用的状态选择器。大多数情况下，像：hover，：link，：active等等，紧跟在选择器之后。上面的jQuery UI选择器是否意味着“应用outline：none;对所有：嵌套在.ui-widget元素下的活动元素”？或者它是否意味着“应用outline：none; to all：active .ui-widget elements”？如果通过删除.ui-widget和：active之间的空格没有区别，我更倾向于使文本框包装器右边框透明，而不是给它宽度为零。

另一个奇怪的事情是后缀组合框不受影响 - 但它使用与Salutation组合框相同的CSS和HTML结构。奇怪的...

Answer 1

.ui-widget：active和.ui-widget：active？
之间有区别吗？

有。 .ui-widget :active表示“具有类”ui-widget“的元素的活动继承者。.ui-widget:active表示”具有类“ui-widget”的活动元素。

如果其他浏览器正确呈现此案例，我建议报告针对Chrome的错误（最好是减少测试用例）：http://new.crbug.com

.ui-widget：active和.ui-widget：active之间有区别吗？

1 个答案: