поле auto + float right не работает в IE7 - PullRequest
Новая
       7

поле auto + float right не работает в IE7

3 голосов
/ 13 сентября 2011

У меня проблема с 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:

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

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

div

Правильный вывод будет«тело» по центру):

div

  • «плавающий» блок фактически не плавает над телом, когда сворачивается

получить в IE7:

div

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

div

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

1 Ответ

0 голосов
/ 13 сентября 2011

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

...