#html #css #cross-browser
#HTML #css #кроссбраузерный
Вопрос:
У меня есть следующий HTML / CSS, который просто имеет <span> тег, стилизованный под float:right внутри <h2> тега:
<style>h2{background-color:#e2e2e2;}
span{float:right;border:1px solid red;}</style>
<h2>H2 Test <span>SPAN text</span></h2>
В Firefox все работает хорошо (и я подозреваю, что в других хороших браузерах, таких как Chrome, Opera и т.д.), Но в IE <span> выполняется принудительный перевод на следующую строку.
Примечание: на рисунке показан пример Firefox и IE. 
Как я могу заставить IE дублировать поведение Firefox?
Дополнительная информация: Я не привязан к использованию float:right , все, что я действительно хочу, это выровнять часть текста по левому краю, а часть текста по правому краю внутри <h2> . Я пробовал множество способов, но IE всегда кажется браузером, который просто не будет работать. Буду признателен за любую помощь.
Комментарии:
1. Я могу ошибаться, поэтому это публикуется как комментарий, а не как ответ. Но разве вы обычно не применяете «float» только к элементам уровня блока? Span — это не блок, а встроенный элемент, и, возможно, именно поэтому IE не очень хорошо с ним обращается.
2. То же самое происходит с
<div>тегом. Я подумал, что, возможно,<span>это может быть не так, потому что это не элемент уровня блока.3. Это работает, но я не уверен, что это именно то поведение, которое вы хотите. Дайте мне знать, и я попытаюсь изменить это, если это не так: jsfiddle.net/DctfL/12
4. С какой версией IE вы тестируете? Какие версии IE вас интересуют? Не могли бы вы добавить полный HTML, который вы используете для этого изображения «H2 Test»?
5. Сейчас я читаю больше об этом, и пока я нахожу консенсус в том, что вы не можете применять «float» к элементам неблочного уровня.
Ответ №1:
HTML:
<h2><span class="_1">H2 Test</span><span class="_2">SPAN text</span></h2>
css:
h2{background-color:#e2e2e2;overflow:hidden}
span._1{float:left}
span._2{float:right;border:1px solid red;}
демонстрация jsfiddle:
http://jsfiddle.net/shmZR /