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

Скажу пару слов о вредности представления совместимости 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 такой проблемы не было.

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

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

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

Правильное позиционирование тега span

Правильное позиционирование тега span

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

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

Compatibility View

Compatibility View

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

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

Ваши комментарии к статье:

Wordpress

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

ВКонтакте
Google+