Нужна помощь с границами CSS DIV, разные представления между IE и FireFox - PullRequest
Новая
       11

Нужна помощь с границами CSS DIV, разные представления между IE и FireFox

1 голос
/ 23 ноября 2010

Я показываю изображение различий в представлении границ для div элементов между IE и FireFox. IE правильно отображает границу, а FireFox - нет. Как вы могли заметить, черная граница для BorderDiv швов не учитывает тот факт, что ее родительский div имеет высоту 78 пикселей. Вместо этого уважает высоту самого внешнего div. Чтобы усложнить ситуацию, правая сторона границы рисуется без учета самой внешней div.

alt text

Я здесь потерян. Что мне нужно сделать, чтобы добиться в FireFox того же результата, что и в IE? Обратите внимание, что я хочу, чтобы ширина и высота для BorderDiv были равны 100%, я не хочу устанавливать это явно.

Вот мой код: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;">
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div>
      </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div>
</div>
</BODY>
</HTML>

Спасибо.

1 Ответ

3 голосов
/ 23 ноября 2010

На самом деле все наоборот: Firefox верен, а IE неверен.

Это связано с плохой реализацией IE * модели box .

Элемент div "BorderDiv" имеет высоту контейнера в 100% ("ContentColumn"), которая составляет 78 пикселей. Затем к этому добавляются граница, отступы и поля.

Почему бы просто не добавить границу в div "ContentColumn" и вообще избавиться от div "BorderDiv": 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
        <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;">
            right
        </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">
        left
    </div>
</div>
</BODY>

</HTML>

Редактировать Изменен «ContentColumn», чтобы иметь высоту 76px, чтобы учесть размер границы.

Кроме того, вы можете не использовать quirksmode в IE, поэтому он будет использовать правильную блочную модель.

...