Как мне исправить эту простую проблему с плавающим CSS в IE? - PullRequest
Новая
       34

Как мне исправить эту простую проблему с плавающим CSS в IE?

3 голосов
/ 25 января 2009

У меня есть четыре div элемента, плавающих слева. Третий div очищается.
В Firefox и Chrome элементы расположены так, как и ожидалось: первый и второй div s расположены рядом друг с другом и находятся над третьим и четвертым div s, которые также соседствуют друг с другом.
IE7, с другой стороны, размещает четвертый div рядом с первым и вторым div с третьим div ниже.

Я знаю, что могу исправить это, добавив элемент br после второго div, но я бы не стал редактировать разметку, если мне не нужно. Есть ли более элегантный способ решения проблемы?

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

Редактировать: Я сделал пример кода немного более сложным после того, как Назгуллед «решил» проблему (см. Комментарии). Теперь четыре div вместо трех, а третий div очищается вместо второго.

Вот полный исходный код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

Вот как это выглядит в Chrome:
Chrome sample

Вот как это выглядит в IE7:
IE Sample

Ответы [ 4 ]

5 голосов
/ 25 января 2009

Я не знаю, решит ли это вашу реальную проблему, но я исправил ваш пример следующим образом:

  • Удалите атрибут float из div
  • Удалите атрибут clear из # divtwo
  • Добавить float: left to # divtwo и # divthree

Это делает его похожим на ваш пример хрома как в Firefox, так и в IE 7 (браузеры, которые я тестировал).

3 голосов
/ 04 октября 2009

Несколько месяцев спустя ...

Я отказался от попыток решить эту проблему только с помощью CSS. Это ошибка IE7, которую нельзя избежать, не касаясь HTML.

Окончательное применение этого плавающего шаблона было в форме, где два из div были входными элементами, а два других div были соответствующими им метками. Шаблон использовался несколько раз в большой форме, и я действительно хотел найти элегантное решение только для CSS.

В итоге я использовал Object-Oriented CSS Framework и обернул все элементы дополнительными div s, чтобы создать желаемый макет, как диктует OOCSS. Это был единственный способ спасти мою душу от CSS адского IE7, и OOCSS не так уж и плох, как только вы завершите первоначальный макет.


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

Хотя это правда, что IE7 не может правильно отобразить CSS, это был также случай ошибочной области видимости с моей стороны. CSS не является окончательным языком разметки, каким его хотел бы наивный программист, и CSS не является действительно независимым от структуры вашего HTML. Я снова решил выбрать более легкий путь, используя OOCSS, когда мне действительно нужно время, чтобы изучить основы CSS.

Увы, таковы последствия сроков.

2 голосов
/ 25 января 2009

Я не уверен, какова ваша конечная цель, но я бы предложил заключить все четыре <div> внутри элемента контейнера и применить к нему ширину, а затем удалить стиль clear из #divthree. Это позволит #divthree и #divfour опуститься ниже #divone и #divtwo без их очистки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
                #divone, #divtwo, #divthree, #divfour
                {
                        width: 100px;
                        height: 100px;
                        color: white;
                        font-size: 3em;
                        float: left;
                }

                #divone
                {
                        background-color: red;
                }

                #divtwo
                {
                        background-color: blue;
                }

                #divthree
                {
                        background-color: green;
                }

                #divfour
                {
                        background-color: purple;
                }

                #container {
                        width: 200px;
                        zoom: 1;
                }
        </style>
    </head>
    <body>
    <div id="container">
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </div>
    </body>
</html>

Свойство zoom в #container необходимо, чтобы избежать ошибки IE6 / 7 Escapeing Floats .

Если вышеприведенное решение не является жизнеспособным, вы можете добавить <br> или <div> после #divtwo в стиле clear: left;: 

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

Этот метод используется в примере макета плавающей страницы на westciv.com .

0 голосов
/ 25 января 2009

Попробуйте добавить: 

display:inline-block;

в #divtwo. Если это сработает, я бы, конечно, добавил несколько условных комментариев для IE7

...