Моя проблема связана с приведенным ниже html
Когда пользователь выбирает В поле ввода я добавляю класс curFocus во внешний div через некоторый javascript, чтобы выделить метку и поле ввода.
Мой CSS -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
Моя проблема в том, что при использовании отладчиков в Chrome 12 и IE9 они оба показывают настройки границы, применяемые к внешнему div. Но при просмотре формы ни один браузер не отображает указанную границу. Все остальные настройки css работают правильно. Я также попытался изменить определение «.curFocus» на «.curFocus div». Но это применило стиль также к каждому вложенному div, но отображало границы на всех div.
Хотя я не эксперт по CSS, не совсем понятно, почему это не должно работать.
Edit Вот ссылка на jsfiddle - http://jsfiddle.net/photo_tom/KmsF5/1/ . Во время тестирования он работает правильно в IE9, если в режиме совместимости с IE7. В противном случае он будет отображаться неправильно. Извините, что не включил ссылку, но все еще привыкаю к тому, что jsfiddle вообще существует.