IE 11 отображает CSS иначе, чем другие браузеры

У меня есть проект, над которым я работаю, и он по-разному отображается в разных браузерах (представьте себе). CSS отлично работает во всех браузерах, которые я пробовал (chrome, safari, firefox), кроме IE11 (опять же, представьте себе). Вот изображение версии IE:

введите здесь описание изображения

Вот как это должно быть выглядеть:

введите здесь описание изображения

Теперь я просмотрел инструменты разработчика в Chrome и IE, и вот результаты.

IE:

введите здесь описание изображения

Chrome: введите здесь описание изображения

Итак, как вы можете видеть на картинке, в IE bwizard-steps button::before и bwizard-steps button::after выделены, но в Chrome они работают так, как задумано.

Любые идеи, почему это будет? Я посмотрел, и предполагается, что IE11 поддерживает теги ::before и ::after. Но явно игнорирует их. Я даже пытался войти в режим совместимости для IE, и это выглядит еще хуже.


google-chrome html css internet-explorer-11 pseudo-element
person PiousVenom    schedule 11.02.2014    source источник
comment
IE не отображает вещи должным образом... Что еще нового? :)   -  person woz    schedule 11.02.2014
comment
На вашем скриншоте IE с инструментами разработчика есть что-то выше этих правил, которое переопределяет показанные?   -  person Anid Monsur    schedule 11.02.2014
comment
@ ginovva320: Я просмотрел инструменты, удалив все, что может переопределить нужные мне правила, и вообще ничего не переопределяет их.   -  person PiousVenom    schedule 11.02.2014
comment
Мне кажется, или у вас есть теги button как прямые потомки тегов ul? Это легальная HTML-разметка?   -  person nzifnab    schedule 11.02.2014
comment
IE10+ бросается из одной крайности в другую в отношении соответствия стандартам. Подтвердите свой код.   -  person isherwood    schedule 11.02.2014
comment
Просто интересно: а что если сказать кнопке -ms-appearance: none; ? Можете ли вы дать часть CSS, пожалуйста?   -  person enguerranws    schedule 11.02.2014
comment
Как говорит @nzifnab, у вас должны быть li как дети ul. Может быть, попробовать обернуть кнопки в li?   -  person vals    schedule 11.02.2014
comment
Да, это, вероятно, решит проблему. IE имеет тенденцию вести себя неопределенно, когда ваша разметка шаткая.   -  person nzifnab    schedule 11.02.2014
comment
Ваш HTML-код недействителен, IE вообще не отображает его неправильно.   -  person Benjamin Gruenbaum    schedule 11.02.2014
comment
@vals: я завернул свои кнопки в теги <li>, и они больше не горизонтальные, а вертикальные кнопки.   -  person PiousVenom    schedule 11.02.2014
comment
Что ж, вам придется соответствующим образом обновить свой CSS, чтобы учесть новую разметку.   -  person nzifnab    schedule 11.02.2014
comment
@nzifnab точно! кнопка изменения для li   -  person vals    schedule 11.02.2014
comment
Помимо неправильного использования списков, вы также используете positionabsolute без необходимости. Один совет: когда вы создаете свой HTML-код, вы пытаетесь проверить его, используя следующую ссылку: validator.w3.org   -  person Guilherme Nascimento    schedule 11.02.2014
comment
@GuilhermeNascimento: Ну, это унаследованный проект. Так что весь код был написан до меня. Не говоря уже о том, что валидатор W3C не проверяет локальный HTML, и я не могу отправить его на рабочий сайт. Но я еще посмотрю на то, что вы и нзифнаб сказали.   -  person PiousVenom    schedule 11.02.2014
comment
@MyCodeSucks Ctrl+S на странице в веб-браузере, сохраните как документ HTML, после отправки загрузите в: validator.w3. org/#validate_by_upload Я знаю, что изменение готовности системы — это сложно (а иногда и пустая трата времени), но на самом деле html несовершенен. К сожалению, это будет ваше личное решение.   -  person Guilherme Nascimento    schedule 11.02.2014

Ответы (2)


arrow_upward
6
arrow_downward

У меня была похожая проблема.

Решение, которое сработало для меня, дало кнопку overflow: visible;

Рабочий пример (IE9+): http://jsfiddle.net/aBfF8/1/

person KainashiCZ    schedule 30.06.2014
comment
Баунти стартовал. Через день у вас будут бессмысленные точки интернета! - person Randolpho; 10.07.2014

arrow_upward
4
arrow_downward

Вероятно, проблема в том, что у вас есть теги button, которые являются прямыми потомками тегов ul. В допустимой HTML-разметке единственными прямыми дочерними элементами ul должны быть li.

Вы должны обернуть кнопки тегами li, но тогда вам придется внести некоторые изменения в CSS, чтобы элементы списка не были вертикальными. float: left; на них среди других изменений, чтобы они выглядели так, как вы хотите.

Изменить: я могу предоставить более подробное решение точных улучшений, которые вы можете внести, если вы предоставите мне соответствующие HTML и CSS (в идеале в jsfiddle )

person nzifnab    schedule 11.02.2014