• Способ борьбы с «прыгающими» блоками в IE

    Володя Токмаков уже два раза освещал способы борьбы с этой напастью (способ 1, способ 2), я добавил третий.

    Вкратце, в чем заключается проблема: IE округляет дробные пиксельные значения, полученные из процентов, до наибольшего целого. То есть если у вас будет блок шириной в 101 пиксель, а внутри него будет два блока шириной в 50%, то ширина каждого блока будет 51 пиксель (101 / 2 = 50,5; округляем до наибольшего целого и получаем 51). Что естественно, в сумме больше, чем 101. В итоге последний блок переносится. Этот способ демонстрирует, как этого можно избежать.

    Особый кайф от статей в техногрете в том, что его читает много людей, а некоторые даже делятся своими решениями. В частности, Сергей Комаров прислал вот такое замечательное решение:

    <style type="text/css">
    	ul, ul li {
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
    	}
    
    	ul {
    		width: 100%;
    		overflow:hidden;
    	}
    
    	ul li {
    		float: left;
    		clear: right;
    		width: 50%;
    
    		background:red;
    	}
    </style>
    <ul>
    	<li>item 1</li>
    	<li>item 2</li>
    </ul>
    

    Вратце, в чём суть: в данном случае есть три обязательных компонента — width: 100%, overflow: hidden и, самый важный, clear: right (я его поставил сейчас для всех элементов списка, но, если у них будут разные классы, то можно приписать это свойство только для последнего).

    Несмотря на небольшой недостаток (немного отрезается правый край у последнего <li>-элемента), способ очень и очень хороший. Спасибо всем остальным читателям, которые прислали такое же решение, но чуть позже.

    Метки: ,
  • Один комментарий

    1. romy4
      17 июня 2009

      а почему не overflow-x?

    Комментировать

    Powered by Zen Coding

    (Spamcheck Enabled)