IE 6/7 и плавает - PullRequest
Новая
       4

IE 6/7 и плавает

3 голосов
/ 24 июля 2010

Мой лоб ушибся от разочарования по этому поводу.В браузерах, совместимых со стандартами, мой макет выглядит хорошо, но, конечно, IE7 и IE6 любят все путать.Я пытаюсь сделать простой заголовок, содержащий текст слева и встроенную форму справа.Заголовок имеет ширину 835 пикселей и центрируется с использованием авто полей.Вот мой код: 

<div id="header"> 
    <span>Some Text</span>
        <div style="display: inline; float: right; margin-top: 6px; position: relative;">
            Jump to: <form ... style="display: inline;"> blah blah </form> 
        </div>
</div>

Насколько я могу судить, IE6 / 7 рассматривает div, содержащий форму, как блочный элемент.Он правильно отображается справа от заголовка div, но отталкивается вниз.Я попытался дать внутреннему div ширину и абсолютную позицию, но безрезультатно.Я действительно хотел бы избежать абсолютного позиционирования, а также условных выражений, если это возможно.Там должно быть что-то, что я пропускаю.Есть предложения?

ОБНОВЛЕНИЕ: Вот скриншот из IE7 alt text http://vincentalcivar.com/ie7.png

Ответы [ 3 ]

2 голосов
/ 24 июля 2010

Изменить <span>Some Text</span> на <span style="float: left;">Some Text</span>.

Кроме того, вы можете удалить, чтобы удалить margin-top: 6px; position: relative; из DIV.

Редактировать: Вот код. 

<div id="header"> 
  <span style="float: left;">Some Text</span>
  <div style="display: inline; float: right;">
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
  </div>
  &nbsp;
</div>

Добавлен &nbsp; (и удален overflow: auto;), поскольку IE6 считает, что в строке нет содержимого после поплавков.

1 голос
/ 24 июля 2010

Я не уверен, почему вы разметили элементы так, как вы, но для некоторого текста слева и формы справа я бы сделал следующее: 

<div id="header">
    <div id="text_holder">
        <p>Lorem ipsum dolor set amet.</p>
    </div>
    <form>
        ...
    </form>
</div>

И следующий CSS: 

#header {
    width: 835px;
    margin: 0 auto;
    overflow: auto;
}
#text_holder {
    float: left;
}
#header form {
    float: right;
}
0 голосов
/ 24 июля 2010

У меня нет доступа к IE6 / 7 в данный момент.Однако в каждом из этих браузеров есть ошибки с плавающей точкой.Добавление свойства CSS zoom: 1 вызовет hasLayout для этих элементов и поможет им визуализировать как ожидается .

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

Возможно, что некоторые из ваших других стилей конфликтуют.Я не уверен, пытались ли вы решить проблему, но display: inline не нужно.

Может помочь опубликовать скриншот того, как все выглядит в IE6 / 7.

...