Посты с тэгом «трюк»

  • Эмуляция position: fixed

    Способ эмуляции CSS-свойства position: fixed в IE6.

    На проверку этот способ оказался довольно глючным с точки зрения удобства пользования сайтом:

    1. при навигации вперед/назад по истории браузера страница не докручивается в то положение, откуда перешли на следующую страницу;
    2. страница не прокручивается при нажатии на пробел;
    3. на айфоне прокрутка не работает в принципе.
    Метки: ,
  • Способ борьбы с «прыгающими» блоками в 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>-элемента), способ очень и очень хороший. Спасибо всем остальным читателям, которые прислали такое же решение, но чуть позже.

    Метки: ,