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

我遇到了Chrome 17.0.963.56的一个非常奇怪的错误。以下是截图：.ui-widget：active和.ui-widget之间是否有区别：active？

enter image description here

当页面呈现先，称呼组合框看起来很好。但是，只要您选中上面的复选框，就会出现奇怪的图像。点击页面上的任何位置，然后导致它消失。取消选中该框会导致它再次出现。我试图在jsfiddle中复制，但不能。

我找到了2种不同的方法让这个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; 
}

基本上，边界来自于输入元件的周围的DIV包装。输入本身没有边界。对于普通的文本框包装，边框半径是5px。然而，对于组合框，我会覆盖该CSS值，以使顶部的右下角为零的半径。这是为了让它融合到组合框的drop-arrow元素中。

当我完全删除文本框包装上的右边框（使用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; }（注意没有小部件之间的空间：激活）问题也会消失 - 即使文本框包装的右边框宽度为零。

只有在上述Chrome版本中，Firefox，IE或Safari 5.1.1（7534.51.22）中才会出现此问题。所以它似乎可能是一个Chrome的bug。

我从来没有见过像这样的空间使用状态选择器。大多数情况下，诸如：hover，：link，：active等等都会在选择器之后立即生效。上面的jQuery UI选择器是否意味着“将大纲：无;全部：嵌套在.ui-widget元素下面的活动元素”？或者是否意味着“应用大纲：无;全部：活动.ui-widget元素”？如果通过删除.ui-widget和：active之间的空间没有区别，我宁愿将解决方案放在使文本框包装右侧边框透明而不是将宽度设置为零的位置。

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

来源

2012-02-24 danludwig

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

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

提供其他浏览器正确渲染这种情况下，我建议对报告Chrome浏览器的bug（最好给出一个简化的测试案例）：http://new.crbug.com

来源

2012-02-24 15:39:57

感谢亚历山大，这是很好的了解。尽管如此，Chrome还是一个非常奇怪的行为。我刚才意识到背景图像中的颜色对应于文本框包装的边框颜色 - 顶部和左侧为深灰色，底部和右侧为较浅的灰色。 – danludwig 2012-02-24 15:45:16

嗯，你有一个边框半径，一个边框看不见，这可能是一个问题 - 你有没有尝试设置你的边框 - 权利可见的东西？ – 2012-02-24 15:49:06

是的，我发现的解决方案之一是保持正确的边框宽度，并给它一个透明的背景颜色。考虑到你的回答，这可能是我现在要解决的问题。但是无法在其他浏览器中复制，这让我认为这是一个Chrome错误，并不适合使用CSS3。 – danludwig 2012-02-24 15:51:28

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

回答

相关问题