Asp.net mvc .ui小部件：活动和.ui小部件：活动之间有区别吗？

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

当页面第一次呈现时，称呼组合框看起来很好。但是，只要选中上面的复选框，就会出现奇怪的图像。单击页面上的任意位置，然后使其消失。取消选中该框将使其再次出现。我试着在JSFIDLE中重新编程，但没有成功

我找到了两种不同的方法来消除这个bug。第一个与组合框的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;
}

当我删除这一行，或者将其更改为

.ui widget:active{outline:none；}

（注意widget和：active之间没有空格）时，问题也会消失——即使文本框包装的右边框宽度为零

这个问题在Firefox、IE或Safari 5.1.1（7534.51.22）中没有出现，只有在上面提到的Chrome版本中才会出现。所以这可能是一个Chrome bug

我以前从未见过将状态选择器用于这样的空间。大多数情况下，诸如：hover、：link、：active等内容会紧跟在选择器之后。上面的jQueryUI选择器是否表示“应用大纲：无；应用到所有：嵌套在.UI小部件元素下的活动元素”？或者它的意思是“应用大纲：无；应用于所有：active.ui小部件元素”？如果移除.ui小部件和：active之间的空格没有什么区别，我更喜欢这种解决方案，而不是让文本框包装器的右边框透明，而不是让它的宽度为零

另一件奇怪的事情是后缀组合框不受影响——但它使用与称呼组合框相同的CSS和HTML结构。奇怪的

.ui小部件：活动和.ui小部件：活动之间有区别吗

有

.ui-widget:active

表示“具有类“ui-widget”的元素的活动后续元素”。

.ui-widget:active

表示“具有类“ui-widget”的活动元素”

如果其他浏览器正确地呈现了这种情况，我建议针对Chrome报告一个bug（最好给出一个简化的测试用例）：

.ui小部件：活动和.ui小部件：活动之间有区别吗

有

.ui-widget:active

表示“具有类“ui-widget”的元素的活动后续元素”。

.ui-widget:active

表示“具有类“ui-widget”的活动元素”

---

如果其他浏览器正确地呈现了这种情况，我建议报告一个针对Chrome的bug（最好给出一个简化的测试用例）：

谢谢Alexander，很高兴知道这一点。不过，Chrome的一个非常奇怪的行为。我刚刚意识到背景图像中的颜色对应于文本框包装的边框颜色——顶部和左侧为深灰色，底部和右侧为浅灰色。嗯，您有一个边框半径，其中一个边框不可见，这可能是一个问题-您是否尝试将边框设置为可见的颜色？是的，我找到的解决方案之一是保持正确的边框宽度，并给它一个透明的背景色。考虑到你的答案，这可能是我目前将采用的解决方案。然而，无法在其他浏览器中重新编程使我认为这是一个Chrome bug，而不是不恰当地使用CSS3。在这种情况下，最好的选择是针对Chrome报告一个bug（最好给出一个简化的测试用例）：谢谢，我一定会这么做。请把最后的评论复制到你的答案中，我会打分。谢谢亚历山大，很高兴知道。不过，Chrome的一个非常奇怪的行为。我刚刚意识到背景图像中的颜色对应于文本框包装的边框颜色——顶部和左侧为深灰色，底部和右侧为浅灰色。嗯，您有一个边框半径，其中一个边框不可见，这可能是一个问题-您是否尝试将边框设置为可见的颜色？是的，我找到的解决方案之一是保持正确的边框宽度，并给它一个透明的背景色。考虑到你的答案，这可能是我目前将采用的解决方案。然而，无法在其他浏览器中重新编程使我认为这是一个Chrome bug，而不是不恰当地使用CSS3。在这种情况下，最好的选择是针对Chrome报告一个bug（最好给出一个简化的测试用例）：谢谢，我一定会这么做。请将最后的评论复制到你的答案中，我会打分。

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