У меня очень странная ошибка с 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 вокруг элемента ввода.Сам вход не имеет границы.Для обычных оболочек текстовых полей радиус границы составляет 5 пикселей.Однако для комбинированного списка я переопределяю это значение CSS, чтобы верхний и нижний правые углы имели нулевой радиус.Это сделано для того, чтобы он вписался в элемент со стрелкой для выпадающего списка.
Когда я полностью удаляю правую границу обертки текстового поля (используя 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; } (обратите внимание на отсутствие пробела между виджетом и: active), проблема также исчезает, даже еслиобертка текстового поля, имеющая ширину правой границы, равную нулю.
Эта проблема не возникает в Firefox, IE или Safari 5.1.1 (7534.51.22), только в версии Chrome, упомянутой выше.Так что, похоже, это может быть ошибка Chrome.
Я никогда не видел, чтобы селектор состояний раньше использовался с таким пробелом.В большинстве случаев такие вещи, как: hover,: link,: active и т. Д., Появляются сразу после селектора.Означает ли вышеуказанный селектор пользовательского интерфейса jQuery «применить контур: нет; ко всем: активным элементам, вложенным в элемент .ui-widget»?Или это означает «применить схему: нет; ко всем: активным элементам .ui-widget»?Если нет разницы, убрав пробел между .ui-widget и: active, я бы предпочел, чтобы это решение делало прозрачной правую границу обертки текстового поля, а не ширину нуля.
Еще одна странность состоит в том, что на комбинированный список Suffix это не влияет - но в нем используется та же точная структура CSS и HTML, что и в комбинированном списке Salutation.Weird ...