Плавающие промежутки в IE7 заставляют родительский div расширяться до 100% доступной ширины

Question

Я просматривал подобные вопросы здесь, в Переполнении стека, но ни один из них не решает проблему:

http://jsfiddle.net/2SGCb/12/

У меня слишком много пролетов:

<span class="in_bl right">Right</span>
<span class="in_bl left">Left</span>

Мне нужно отобразить их в обратном порядке, поэтому я их плаваю. Это хорошо работает во всех браузерах, кроме Internet Explorer.

Пожалуйста, взгляните на эту скрипку в IE: http://jsfiddle.net/2SGCb/12/

На самом деле есть две проблемы:

а) Слово «вправо» всплывает в самый конец окна

b) оба слова «влево» и «вправо» теперь появляются во втором ряду, а не в первом.

В html-коде «Right» должен идти перед «Left» (поэтому strip_tags () должен приводить к «Right Left»), но пользователь должен видеть «Left Right». Любые другие предложения, как поменять местами визуально (но не в HTML-коде), тоже приветствуются.

Answer 1

а) слово «вправо» всплывает в самый конец окна

Вместо того, чтобы перемещать один элемент влево, а другой вправо, перемещать их оба влево,Затем создайте структуру HTML, соответствующую вашим требованиям макета. DEMO

Например, я поменял их местами и выплыл влево:

<span class="in_bl left">Left</span>
<span class="in_bl right">Right</span>

b) оба слова "влево" и«Right» теперь появляется во втором ряду, а не в первом.

Используя display: inline-block в IE7, вы должны включить *display:inline и zoom:1 для запуска'hasLayout' и заставьте его работать.