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

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

0 голосов
/ 10 июня 2011

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

У меня настроен следующий код (извините, я не могуукажите тестовую ссылку), и он отлично отображается в 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>

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

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

и

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

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

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

:: edit ::

Вот некоторые дополнительные сведения / снимки экрана.

На следующем рисунке показаны два экрана.верхняя часть - это то, как это показано в 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 Ответ

0 голосов
/ 10 июня 2011

добавьте 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.

...