IE7 / IE8 Совместимый рендеринг с плавающей версией неправильный - PullRequest
Новая
       26

IE7 / IE8 Совместимый рендеринг с плавающей версией неправильный

0 голосов
/ 14 сентября 2010

У меня есть сайт с правой боковой панелью и левой основной областью контента. Код выглядит так: 

<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>

с 

.leftside
{
  float:left;
  width:710px;
}
.rightside
{
  margin-left:720px;
}

(см. Фактический сайт на http://blog.stephenkiers.com/)

Причина, по которой он закодирован таким образом, заключается в том, что, поскольку левый борт имеет важное значение, и я хочу, чтобы первые данные были доступны для посетителей с нарушениями зрения; вместо того чтобы каждый раз пропускать весь пух!

Код работает в FF, IE8, Safari и т. Д .; но в IE7 правая часть div очищает плавающие элементы div.

Буду рад любым вашим предложениям. У меня есть некоторые идеи о том, как это исправить; но все они связаны с довольно большими изменениями.

спасибо!

1 Ответ

1 голос
/ 10 мая 2011

почему бы вам не попробовать поместить содержимое в два столбца, как это пример

CSS: 

.leftside {
  float:left;
  width:710px;
}

.rightside {
  float: left;
  margin-left: 20px;
}

.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }

HTML: 

<div class="leftside">
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>main stuff goes here</p>
  </div>
</div>
<div class="rightside">
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
  <div class="contentBlock">
    <p>secondary stuff goes here</p>
  </div>
</div>

Таким образом, левая сторона и правая сторона являются просто элементами макета и изолированы от содержимого.

Еще один полезный совет для посетителей со слабым зрением - иметь ссылки вверху страницы, чтобы пользователи могли напрямую переходить к разделам контента и скрывать их от макета с помощью css: 

.skipToLinks { position: absolute; top: -100px;}
...