Про интерес > Неправильное позиционирование тега span в IE 9.

Неправильное позиционирование тега span в IE 9.

Автор: sete 17.07.2015 0 комментария

Скажу пару слов о вредности представления совместимости IE9 (Internet Explorer 9). Благодаря ему вы можете можете получить неприятные глюки разметки, причины которых достаточно сложно диагностировать.

Я столкнулся с наложением иконок для кнопок (тег <button>) в одном из меню. Дело в том что кнопка в JSF тег <p:commandButton> представляет из себя следующую конструкцию

<p:commandButton id=»» styleClass=»button-class» icon=»icon» onclick=»do_something()» title=»#{msgs[‘button.label’]}»/>

.icon { width: 32px; height: 32px; background-image: url(«#{resource[‘images:icon32.png’]}») !important; }

это рендерится в html конструкцию вида

<button>

<span class=»icon»>Стиль в качестве background-image содержит иконку</span>

<span></span>

</button>

В IE9 Получалась вот такая картина. Происходило неправильное позиционирование тегов span в Internet Explorer 9. При этом в в других браузерах и в том числе IE11 такой проблемы не было.

Правильно меню должно было выглядеть вот так.

Так у меня на компе IE9 не было и ставить его не хотелось пришлось изучать генерированную разметку и пробовать различные режимы совместимости в IE11. Ничего крамольного я не нашел.

Оказалось что в настройках IE9 есть вот такой пункт, который автоматически включает Compatibility View (Представление совместимости). Который использует режим совместимости с IE7, в который не понимает тег <button>, в результате чего span начинает позиционироваться относительно внешнего тега.

Этот пункт надо отключить (как показано на картинке выше) и заново открыть браузер. Проверьте какой именно режим совместимости выставил браузер. Для этого воспользуйтесь панелью разработчика IE, которая включается с помощью клавиши F12. Там должен быть выставлен режим обычного IE9.

Поэтому перед тем как бросаться править и анализировать разметку для IE, убедитесь, что он работает в правильном режиме.