IE7 и Firefox 3 Rendering Difference

Вот схема страницы, которую я разрабатываю.IE7 и Firefox 3 Rendering Difference

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <link rel="stylesheet" href="../css/test.css" /> 
    <title>Prosperity Login</title> 
    </head> 
    <body> 
    <div id="banner"> 
    </div> 
    <div id="subbanner"> 
    </div> 
    <div id="body"> 
     <div id="colA"> 
     </div> 
     <div id="colB"> 
     <div id="B1"> 
     </div> 
     <div id="B2"> 
     </div> 
     </div> 
     <div id="colC"> 
     </div> 
     <div id="colD"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
    </body> 
</html>

И CSS:

* { 
    margin: 0px; 
    padding: 0px; 
} 



div { 
    border: 1px dotted; 
} 

#banner { 
    height: 70px; 
    width: 100%; 
} 

#subbanner { 
    height: 30px; 
    width: 100%; 
} 

#body { 
    background-color: #CCFFCC; 
    width: 80%; 
} 

#colA{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#colB{ 
    float: left; 
    height: 80px; 
    width: 24%; 
} 
#colC{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 
#colD{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#B1{ 
    float: right; 
    height: 48px; 
    width: 80%; 
} 

#B2{ 
    float: right; 
    height: 28px; 
    width: 80%; 
} 
#footer{ 
    height: 30px; 
    width: 100%; 
}

В Firefox 3, ДИВО тело (с зеленым фоном) является сплющенным почти ничего в то время как IE7 отображает страницу полностью. Из того, что я могу сказать о стандарте CSS 2.1 (через книгу O'Reilly от Meyer), плавающие div должны плавать внутри своего контейнерного блока, что явно не относится к Firefox 3.

Так что если рендеринг Firefox совместим, то что Я пропустил?

источник

2009-03-01 gvkv

Следует отметить, что Opera аналогично относится к Firefox. – strager

http://jsbin.com/eyanu – strager

Ваша проблема в том, что IE7 очищает родительский элемент так, чтобы он содержал плавающий ребенок. Это не то, как это должно быть сделано. Лучшее объяснение других плакатов.

Простое исправление: применять overflow: hidden; к вашему #body:

#body { 
    overflow: hidden; 
}

См this post объяснения.

источник

2009-03-01 21:37:45 strager

Я всегда использовал переполнение: автоматически, но связанная статья упоминает причины использования переполнения: скрыта вместо этого в последнем абзаце. Спасибо за ссылку. –

переполнение: скрыто; определенно мой предпочтительный способ справиться с этим. Это тоже не хак, он ведет себя так же, как спецификация CSS2 говорит о том, что переполнение должно работать: «Поплавки, абсолютно позиционированные элементы, встроенные блоки, таблицы-ячейки, заголовки таблиц и элементы с« переполнением », кроме« видимых »(кроме когда это значение было распространено в окне просмотра), установите новые контексты форматирования блоков. " – Wick

Как всегда, когда страница отличается от Internet Explorer и Firefox, Firefox правильно отображает страницу.

Кузов не должен иметь высоты. Он содержит только плавающий элемент, поэтому в нем нет ничего, что давало бы ему любую высоту. Плавающий элемент не влияет на размер его родителя. IE делает это размахивая и расширяет элемент, чтобы содержать его детей. Это одна из хорошо известных ошибок рендеринга IE.

Удалить тег xml из кода. Докторий должен быть первым на странице, иначе IE проигнорирует его.

Если вы просматриваете страницу в IE 8 beta, она будет отображать страницу точно так же, как Firefox.

источник

2009-03-01 21:37:14 Guffa

Спасибо за хедз-ап в объявлении doctype. – gvkv

+1 при удалении (в любом случае избыточном) декларации XML. Смущает IE, и редко есть веская причина для его включения. – bobince

Нет никакого веса или объема, присвоенных div с id = "body". Любой текст, помещенный внутри div, даст ему объем и сделает цвет фона подходящим. Эта проблема будет играть и в браузерах, основанных на Webkit (Chrome, Safari).

Либо поместить текст в тело div, чтобы придать ему вес или добавить стиль переполнения: скрытый; к div с id = body.

источник

2009-03-01 21:37:41 ahsteele

Да, и это поведение, которое я заметил тоже, когда я добавил фиктивный текст в div тела. – gvkv

Спасибо всем за ваши ответы.

Существует еще одно решение, которое также решает мою проблему: плавающий родительский div (id = "body"). Это происходит прямо из книги Мейера, поэтому я не уверен, как я ее пропустил. Еще один пример - учиться! Другое дело, что это также решает другую проблему, о которой я не говорил: как мне соответствовать разность между телом и нижним колонтитулом? Поскольку в Firefox очистка нижнего колонтитула не позволяет использовать маржу, чтобы дать пространство между телом и нижним колонтитулом. Однако плавающий родительский элемент делает.

источник

2009-03-01 23:32:07 gvkv

IE7 и Firefox 3 Rendering Difference

ответ

Смежные вопросы