float / background-color / padding ie6 bug

Question

У меня проблема с моим сайтом. Следующий код не отображается правильно в ie6. Левый отступ отсутствует.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
  <div style="margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
   <div style="float: right;">top_right</div>
   <div style="clear: both;"></div>
   <div>test</div>
  </div>
</div>

Ради примера я изменил весь стиль на встроенный. Я не хочу просто устанавливать выравнивание текста вправо для текста "top_right", потому что у меня есть некоторые другие странные случайные ошибки, подобные этой. Также, если я уберу цвет фона, он будет работать нормально (в данном случае).

Что мне делать? Будем благодарны за любую помощь, спасибо!

Answer 1

Одним из решений может быть сделать его абсолютным позиционированием, а затем установить расстояние с правой стороны, равное отступу. Единственная проблема в том, что текст слева будет находиться на той же строке, поэтому вам понадобится какая-то прокладка там, если вам нужно, чтобы он был на отдельной строке.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="position:relative; margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="position:absolute; right:16px;">top_right</div>
      <div style="clear: both;"></div>
      <div>test</div>
   </div>
</div>

Answer 2

ie6 значение ширины должно быть фиксированным.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="margin: 0 0 48px; width:566px; padding:16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="float: right;">top_right</div>
      <div style="clear:both">test</div>
   </div>
</div>

Answer 3

Первое, что нужно попробовать при борьбе с IE6, это установить hasLayout .Используйте zoom: 1 для второго <div>.