IE7, плавающий элемент, перенос содержимого, ошибка?

#css #internet-explorer-7 #css-float

Вопрос:

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

У меня настроен следующий код (извините, я не могу предоставить тестовую ссылку), и он отлично отображается в FF, Chrome, IE8, но в IE7 и IE6 я испытываю странную проблему с плавающей точкой / переносом.

Похоже, что без видимой причины теги h1 и h2, хотя ширина не задана, переносятся.

 <div style="width:900px; margin:0 auto;">

<h1 style="float:left; background:#ccc">a long title with background behind text<h1>
<h2 style="float:left; background:#ccc">a longer sub title that also has a background behind text.<h2>

</div>

который отображается как:

длинный заголовок с фоном
позади текста

более длинный заголовок, который также имеет
фон за текстом.

Если я удалю плавающий элемент, цвет фона займет всю ширину (чего я не хочу), но текст больше не переносится.

У кого-нибудь есть идеи?

:: редактировать::

Вот некоторая дополнительная информация / скриншоты.

На следующем рисунке показаны два дисплея. главное — это то, как это отображается в IE6, IE7 и IE8 с использованием режима документа: стандарты IE7.

Внизу — FireFox, обычный режим IE8, Chrome

http://awesomescreenshot.com/0a4en0paa

При устранении неполадок я определил, что на строку, которая переносится, влияет строка над ней. Пример: если крошка длинная, заголовок будет иметь короткий перенос, если крошка маленькая, заголовок может вообще не переноситься.

Если я сделаю

дисплей: встроенный заголовок будет отображаться правильно, но подзаголовок будет переноситься в зависимости от длины заголовка. Кроме того, превращение его в встроенный элемент разрушает заполнение текста.

Фактический код:

 <div id="hero" style="background:url(images/bg-hero.jpg) center top no-repeat;">
    <div class="panel-content">
        <p style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">this / is / a bread / crumb / trail / which seems to influence the following item's width</p>
        <h1 style="background:rgb(0,100,175); background:rgba(0,100,175,.7);">Title of the page which should span the width</h1>
        <h2 style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">sub title which should behave the same way and span the availble width</h2>
    </div>
</div>

CSS:

 #hero { position:relative; z-index:0; color:#fff; width:100%; min-width:1024px; margin:0 0; overflow:hidden; height:238px; background:url(images/bg-hero-default.jpg) center top no-repeat }
#hero .panel-content {  width:978px; min-width: 978px; margin:0 auto; padding:35px 23px 0; position:relative; }
#hero p { float:left; font-size:1.5em; line-height:1.6em; padding:0 5px; margin:0 0 5px; }
#hero h1 { float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em; }
#hero h2 { float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px; }

1. Не могли бы вы описать, какого поведения вы ожидаете? как бы то ни было, ваш вопрос не дает мне достаточно элементов, чтобы понять это

2. Привет @Joe Rizzo возможно, вы можете воссоздать его на www.jsfiddle . сетевой сайт? Итак, мы можем понять, что вы имеете в виду.

3. Можете ли вы дважды проверить свой HTML? У вас нет закрытия <h1> или <h2> .

4. добавлена некоторая дополнительная информация с фактическим кодом, а не примером.

Ответ №1:

добавьте white-space:nowrap; в свое объявление hx

 #hero h1 {float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em;white-space:nowrap; }
#hero h2 {float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px;white-space:nowrap; }

работает у меня в режиме ie8, ie7.

1. Это была моя первая мысль, но будут случаи, когда содержимое будет достаточно длинным, чтобы нуждаться в переносе, и я не могу добавить <br /> s, чтобы принудительно это сделать.