Специфика CSS - кросс-браузерные проблемы

Question

Специфика CSS - кросс-браузерные проблемы

0

Это упражнение для меня, поэтому заблаговременно за то, что не сообщила мне, почему я не хочу делать следующее. Я не хочу этого делать, я хочу понять.

Учитывая следующий CSS:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type="checkbox"]:focus {
    outline: none;
}

Специфичность для обоих показывает как 0,2,1, и все, что я читаю о CSS, говорит о том, что второй стиль должен переопределять первый, поскольку он наступает последним. Если я получу более конкретную информацию о втором стиле, он победит. Но как указано, Chrome не отображает схему, но IE11 и FF28 делают. Мне кажется, что это такое принципиально простое применение CSS. Кто-нибудь имеет представление о том, что является основной проблемой, так что я могу потянуть его в свое мышление, когда я разрабатываю таблицы стилей?

EDIT: Chrome также не отображает контур, если я удалю второй стиль. В Chrome контур: тонкие точечные перекрываются следующей строкой. Итак, похоже, что по спецификации, Chrome играет по книге, а FF и IE нет? Может ли это быть разницей в объединении или переопределении в том, как браузеры интерпретируют CSS?

Jeff Dunlop 18 апр. 2014, в 07:57

Источник

0

Не могли бы вы предоставить страницу, которую мы можем посетить, чтобы легко увидеть проблему, пожалуйста? (В частности, потому что, если вы применяете только эти стили, таблица стилей ОС может применить что-то с внешним видом контура.)
Ry-♦ 18 апр. 2014, в 05:31
0

Пожалуйста, создайте скрипку, если это возможно jsfiddle.net. Было бы легко анализировать и отлаживать
Ankur Aggarwal 18 апр. 2014, в 05:44
0

Это сложнее, чем вопрос специфики. Если вы используете outline: solid red 3px во втором правиле, это действует и в FF. И даже код в вопросе имеет эффект в FF, но только частичный: верхний и левый контуры сплошные, остальные два пунктирные. В IE я не могу сейчас воспроизвести проблему; Я думал, что сделал, но теперь я не могу.
Jukka K. Korpela 18 апр. 2014, в 06:32
0

Это работает для меня в IE11 и FF28. jsfiddle.net/Qpc88
MiniRagnarok 18 апр. 2014, в 13:46

Показать ещё 2 комментария

Теги:

html

css

cross-browser

1 ответ

Ещё вопросы

Не могли бы вы предоставить страницу, которую мы можем посетить, чтобы легко увидеть проблему, пожалуйста? (В частности, потому что, если вы применяете только эти стили, таблица стилей ОС может применить что-то с внешним видом контура.)
Пожалуйста, создайте скрипку, если это возможно jsfiddle.net. Было бы легко анализировать и отлаживать
Это сложнее, чем вопрос специфики. Если вы используете outline: solid red 3px во втором правиле, это действует и в FF. И даже код в вопросе имеет эффект в FF, но только частичный: верхний и левый контуры сплошные, остальные два пунктирные. В IE я не могу сейчас воспроизвести проблему; Я думал, что сделал, но теперь я не могу.
Это работает для меня в IE11 и FF28. jsfiddle.net/Qpc88

Jeff Dunlop · Answer 1 · 2014-04-19T03-33-00.000Z

С извинениями ошибка была моей. Когда я переключился с bootstrap.min.css на bootstrap.less, я не удалил первого из загрузки, поэтому он был загружен последним и переопределил мой Site.less → site.css. Я понял это после того, как попытался создать скрипку, которую я должен был сделать в первую очередь. Не стесняйтесь записывать этот пост в ад так, как этого заслуживает.