маржа auto + float right не работает в IE7

У меня проблема с HTML при рендеринге в IE7.
При объединении блока "margin: auto" с блоком "float: right".

Это пример кода для этой проблемы:

<!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>
</head>
<body>
<div id="floating" style="float: right; background-color: #ccf">
This is the top right links block
</div>
<div id="body" style="width: 800px; margin: auto; background-color: #fcc">
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
This is the body.
</div>
</body>

Проблема с этим кодом в IE7:

  • margin: auto не центрирует блок «тело». Похоже, блок "плавающий" как-то влияет на центрирование.

что я получаю в IE7:

тело блока не центрировано

Правильный дисплей будет (div "body" по центру):

тело блока правильно центрировано

  • "плавающий" блок на самом деле не плавает над телом при схлопывании

что я получаю в IE7:

плавающий div, не плавающий

правильный дисплей:

div, плавающий, правильно плавающий

Кто-нибудь сталкивался с подобными проблемами?
Есть какие-нибудь подсказки, чтобы исправить это в IE7?

Спасибо


css css-float internet-explorer-7
person manuelgos    schedule 13.09.2011    source источник
comment
Мне кажется, что это нормально, однако я могу протестировать, только переведя IE9 в режим рендеринга IE7. единственная разница заключается в том, что IE7 добавляет больше отступов / полей на теле, это можно легко исправить с помощью таблицы стилей сброса   -  person WickyNilliams    schedule 13.09.2011
comment
Добавлены фотографии, чтобы прояснить проблему   -  person manuelgos    schedule 13.09.2011
comment
@ mr.nicksta - существуют значительные различия в рендеринге между режимом совместимости IE7 и реальной копией IE7, поэтому, если вы тестируете свой сайт только для IE7 с использованием режима IE9 IE9, вы, вероятно, будете менее совместимы с IE7, чем вы думаете. Я предлагаю загрузить такой инструмент, как IETester, который позволяет использовать настоящий механизм рендеринга IE7. .   -  person Spudley    schedule 13.09.2011
comment
Чтобы упростить задачу, я вставил образец кода из вопроса на страницу JSFiddle: jsfiddle.net/E6c9g - IE7 действительно отображает его иначе, чем другие браузеры. Боюсь, у меня действительно нет решения для вас, но я надеюсь, что это облегчит другим задачу.   -  person Spudley    schedule 13.09.2011
comment
Я только что разместил изображения с правильным отображением, ожидаемым для этого кода.   -  person manuelgos    schedule 13.09.2011
comment
@Spudley - я вполне уверен, что режим рендеринга IE7 в IE9 более точен, чем IETester. Раньше я использовал IETester и подобные, и они могут быть очень противоречивыми. недавняя статья из Smashing журнал подтверждает это. Автор полностью списывает со счетов IETester и несколько более благосклонно говорит о режимах рендеринга (хотя и с этим возражает). лично я верю, что MS предоставит лучший опыт, чем сторонний инструмент   -  person WickyNilliams    schedule 16.09.2011
comment
Я не пробовал режим IE9 в IE9, но у меня сложилось впечатление, что он идентичен режиму IE8. Вы правы, что IETester тоже кое-что ошибается, но он, по крайней мере, использует правильный движок рендеринга. Все, что я могу дать, это совет из собственного опыта: для сайта, над которым я работаю, IETester обеспечивает более точное моделирование IE7, чем режим IE7 в IE8, который для нас отображает сайт значительно иначе, чем реальный IE7. Ваш пробег может отличаться, но это мой опыт.   -  person Spudley    schedule 16.09.2011

Ответы (1)


arrow_upward
0
arrow_downward

Оберните два div в содержащий div. Задайте ширину обертки: 100%; или любую желаемую общую ширину. Итак, ваш код должен выглядеть так:

<!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>
</head>
<body>
<div id="wrapper" style="width: 100%;">
 <div id="body" style="width: 800px; margin: auto; background-color: #fcc">

/*---- Moved element ---- */
  <div id="floating" style="float: right; background-color: #ccf">
  This is the top right links block
  </div>
/*---- End Moved element ---- */

 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 This is the body.
 </div>
</div>
</body>
</html>

Я не совсем понимаю, но вы можете либо обернуть его в div, либо дать тегу body ширину 100% или любой другой размер, который вы хотите. Обычно хорошо дать тегу body в любом случае ширину 100%, а затем установить div обертывания для стилизации ширины поля.

person CBRRacer    schedule 13.09.2011
comment
попробовал это, но не сработало. Я добавил несколько изображений к вопросу, чтобы лучше объяснить проблему - person manuelgos; 13.09.2011
comment
Я думаю, что вы уменьшаете элемент, который будет перемещаться вправо, но внутри тела это правильно, так что div id = float находится с правой стороны тела. Посмотрите обновленный код - person CBRRacer; 13.09.2011
comment
Боюсь, это не решит проблему. Мы хотим, чтобы плавающий div выходил за пределы 800 пикселей (что является шириной для основного элемента div). В зависимости от экрана браузера плавающий div может фактически плавать над основным элементом div или справа от экрана (за пределами основного div). - person manuelgos; 13.09.2011
comment
Я просто добавил несколько изображений к вопросу с правильной визуализацией, чтобы показать предполагаемый результат отображения. - person manuelgos; 13.09.2011
comment
Я провел быстрый поиск, и похоже, что единственный реальный способ сделать это - использовать позиционированные элементы или jquery. Вот ссылка на другой пост по аналогичной проблеме. ссылка Исходя из опыта, элементы позиционирования могут вызвать другие головные боли из-за совместимости с несколькими браузерами, хотя это становится все меньше и меньше. теперь с новыми браузерами. - person CBRRacer; 13.09.2011