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

Question

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

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

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

-> КОРПУС 100% ширины

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

---> ПЕРВЫЙ РЕБЕНОК DIV 70% поплавка слева (70% КОНТЕЙНЕРА)

---> ВТОРОЙ РЕБЕНОК DIV 30% плавать вправо (30% КОНТЕЙНЕРА)

Но у меня есть 2 равных столбца в разделе ПЕРВЫЙ РЕБЕНОК 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;
}

Answer 1

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

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

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

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

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

Answer 2

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

div {
*min-width: 100%;
}

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

Answer 3

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

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

Хорошо работает в IE7.

Answer 4

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

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