Думаю многие, кто верстает, сталкивался с проблемой округления процентов при верстке резиновых сайтов. Учитывая, что только firefox третьей версии может вменяемо округлить, то проблема достаточно критична.
Спросите о чем я говорю? Ну например вам надо сделать меню-вкладки, пять штук, шириной по 20% от ширины контентной части. Думаете у вас просто так это получится? Фигушки. При наличии “лишних” пикселей, которые не вписываются по габаритам в эти 20%, они будут округляться. И каждый это сделает по-своему. Опера тупо их отбросит. ИЕ логикой не отличается, поэтому пикселей будет либо меньше чем надо, либо больше.
Пришлось мне воевать с таким проектом… Проблему решал через JS. Но это некошерный костыль.
Но способ есть (жаль что на тот проект нельзя повесить, ибо верстка уже вся готова, а переверстывать после кого-то мне жутко влом).
Недавно нарвался на статью (ссылку потерял), где показывался вариант верстки на “супер” отрицательных отступах. Предупреждаю – прежде чем применять такой способ – хорошенько обдумайте сетку сайта….
Итак приступим.
Имеем:
<div id="first">
<ul>
<li class="t1">tab</li>
<li class="t2">tab</li>
<li class="t3">tab</li>
<li class="t4">tab</li>
<li class="t5">tab</li>
</ul>
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
И стили к нему:
* {padding:0;margin:0;border:none;}
body {background: #363228;color: #8f866e;font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;padding: 20px 50px;}
h2 {clear:both;font-size:2.2em;padding: 30px 0;}
ul {zoom:1;} /* for ie */
ul li {float:left;width:20%;padding:10px 0;text-align:center;font-size:1.8em;list-style:none;}
.t1{background:#eee}
.t2{background:#ddd}
.t3{background:#ccc}
.t4{background:#bbb}
.t5{background:#aaa}
.content {background:#fff;clear:both;padding: 30px 0}
.content p {margin: 0 30px 15px 30px;font-size:1.3em;}
В результате в разных брузерах табы либо меньше ширины, либо больше (в зависимости от разрешения).
Теперь чиним
#first {width:20%;margin:auto;}
#first ul {float:left;width:500%;margin-left:-200%;}
#first .content {width:500%;margin-left:-200%;}
* html #second ul {margin-left:auto;} /* for ie6 */
* html #second .content {margin-left:auto;} /* for ie6 */
И ура… все поровнялось.
Что мы в итоге сделали? Мы на начальном этапе сделали округление “левых” пикселей, задав ширину основного контейнера в 20%. А дальше просто вложенные элементы подогнали до нужной нам ширины и выдвинули отрицательным отступом в нужное нам место :). Естесно ИЕ6 нас послал и отрицательным отступом выкинул наш контент к черту на кулички, но без онного поставил как надо. Поэтому, сугубо для ИЕ6, две строчки отменяющие отрицательный отступ слева.
Уж простите если качество написания не сильно понятно, не мастак я много писать :).
Работающий пример можно посмотреть ТУТ .