Почему выборки HTML выглядят по-разному в IE в зависимости от типа документа? - PullRequest
Новая
       10

Почему выборки HTML выглядят по-разному в IE в зависимости от типа документа?

0 голосов
/ 06 января 2012

До недавнего времени наше приложение не указывало тип документа.Затем, чтобы сделать приложение более совместимым с браузерами, мы добавили строгий тип документа.Это сделало все поведение более похожим в разных браузерах.Однако в IE9 мы заметили, что это меняет внешний вид выбранных элементов.Чтобы убедиться, что это было единственно возможным, я создал HTML-страницу со следующим текстом: 

<html>
<select>
    <option>Testing</option>
</select>
</html>

Этот HTML-код отображается в IE9 следующим образом:

no doc type

Затем я просто добавляю тип документа следующим образом: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
    <option>Testing</option>
</select>
</html>

. Затем HTML-код выглядит следующим образом:

with doc type

Существуют некоторые тонкие различия, носамая большая, которая выделяется для меня - это часть выпадающего меню, где находится стрелка вниз.У одного фон белый, а у другого серый.Существует ли какой-то стандарт CSS, который меняет стиль при выборе?Мы хотели бы сохранить его так, как раньше, но я не уверен, что это возможно.

Я попытался выполнить тот же тест в FireFox, и отображать как noctype, так и строгий doctype на белом фонедля стрелки вниз.Один и тот же тест для Chrome делает это с серым фоном.

Есть ли способ контролировать это?Любая информация об этом будет принята с благодарностью.Спасибо.

Ответы [ 3 ]

1 голос
/ 06 января 2012

Это неприятный побочный эффект от смешения нативных элементов ОС на странице. В моем опыте лучший способ справиться с этим - полностью изменить стиль элемента. Чем старше браузер и чем больше браузеров вы поддерживаете, тем сложнее это становится, поскольку все они имеют тонкие различия. Вот пара страниц, с которых можно начать стилизацию этих элементов.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://bavotasan.com/2011/style-select-box-using-only-css/

0 голосов
/ 06 января 2012

Отсутствие доктайпа переводит вас в режим причуд , где вы никогда не захотите быть. Требуется тип документа для всех современных веб-страниц, чтобы быть в режиме стандартов. В режиме причуд не соблюдается правильная блочная модель, особенно IE, и могут происходить всякие странные вещи. Вот почему всегда нужно указывать тип документа на каждой веб-странице. И как только он установлен, вы никогда его не измените.

0 голосов
/ 06 января 2012

Может быть, стоит сначала использовать YUI Reset для очистки любых таблиц стилей браузера с вашей страницы?

http://developer.yahoo.com/yui/reset/

...