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

StackOverflow https://stackoverflow.com/questions/477157

Вопрос

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

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

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

Редактировать: Я немного усложнил пример кода после того, как Nazgulled «решил» проблему (см. комментарии).Их теперь четыре divs вместо трёх и третьего 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

Это было полезно?

Решение 2

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

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

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

В конце концов я начал использовать Объектно-ориентированный CSS-фреймворк и оборачиваем все элементы дополнительными divs, чтобы создать желаемый макет, как того требует OOCSS.Это был единственный способ спасти мою душу от ада CSS в IE7, и OOCSS не так уж и плох, как только вы закончите первоначальный макет.


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

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

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

Другие советы

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

  • Удалить плавать атрибут из div
  • Удалить прозрачный атрибут из #divtwo
  • Добавлять плавать:левый к #divtwo и #divthree

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

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

<!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>

Свойство #container в <br> необходимо, чтобы избежать IE6 / 7. Escape Elling Bug .

Если приведенное выше решение не является жизнеспособным, вы можете добавить 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 .

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

display:inline-block;

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top