Как исправить ошибку Internet explorer 7 при использовании процентной ширины для макета?

Пожалуйста, помогите мне в этом. Мне нужно создать макет, используя процентную ширину. У меня есть оболочка шириной 100%.

Теперь у меня есть DIV (главная обертка.. Я хочу сохранить ее на 94% ширины процента.. 94% от 100% тела).. хорошо нормально

Итак, чтобы сделать это простым.

- > BODY 100% ширина набора

- > КОНТЕЙНЕР 94% ширина

--- > FIRST CHILD DIV 70% поплавок влево (70% КОНТЕЙНЕРА)

--- > SECOND CHILD DIV 30% float right (30% КОНТЕЙНЕРА)

Но у меня есть 2 равных столбца под FIRST CHILD DIV

----- > 50% и 50% процентная ширина

Ошибка: в ie7.. последний столбец отображается внизу.. его неправильно обработано. Если я уменьшу ширину до 29.9%!!! это работает. Я думаю, что у ie7 есть ошибка в обработке процентных значений или что-то в этом роде. Просьба пояснить это. Надеюсь, у вас возникнет проблема, потому что css/html слишком длинный. Я просто надеюсь, что это будет распространенная проблема..: (

Вот CSS для этого DIV.. Надеюсь, что помогает:)

body {
width: 100%;
background: #fff;
text-align: center;
font-size: 12px;
}

#wide-primary {
background: #fff url(img/shadow1.png) repeat-x top;
position: relative;
top: -1px;
}

#primary {
width: 94%;
margin: 0 auto 0 auto;
text-align: left;
}

#features {
float: left;
width: 70%;
padding: 2% 0 0 0;
}

.featurebox {
float: left;
width: 48%;
padding: 0 2% 3% 0;
}

#lastnews {
float: right;
width: 30%;
padding: 2% 0 2% 0;
}

Ответ 1

Проблема заключается в округлении субпикселей. Когда вы проектируете с процентами, будут моменты, когда математика не приводит к полному количеству пикселей (70% от 721 пикселей составляет 504,7 пикселей). 721 произвольно, но используя проценты, вы будете запускать произвольные числа. Там этого не избежать. Большинство браузеров определяют решение округления для вас, которое не нарушает макет. IE7 (и старше) просто округляют. Округление вверх, ширина вашего контейнера в 721px будет включать в себя одну коробку при 505px, а другую - 217px, в общей сложности 722px - более 100%. В этот момент IE решает, что второй ящик не может поместиться и опускается ниже.

В зависимости от вашей ситуации существуют различные решения. Николь Салливан имеет интересное решение, основанное на использовании "overflow: hidden"; в последнем столбце, а не в комбинации с поплавком/шириной. Я использую его, когда могу. Посмотрите здесь:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

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

Надеюсь, что это поможет. Приветствия.

Ответ 2

Вот простое решение для этого:

div {
*min-width: 100%;
}

протестирован в IE7.

Ответ 3

Это то, что я использую, чтобы исправить эту проблему в IE 7.

<!--[if IE 7]>
    <style>
        body {
        padding:0 1% 0 0;
        width:101%;
        }
    </style>
<![endif]-->

Ответ 4

Попробуйте следующее:

div {
    width: 100%;
    *overflow: auto;
}

Это хорошо работает в IE7.