Kanał ATOM
Autor wpisu: batman, dodany: 29.08.2011 08:00, tagi: css
Od czasu do czasu nie mamy możliwości całkowitego zignorowania IE6 i zmuszeni jesteśmy do modyfikacji naszego dzieła. Kolejną niedziałającą właściwością CSS, z którą IE6 sobie nie radzi jest position: inline-block. Ten typ wyświetlania elementu jest bardzo pomocy w wielu przypadkach i często zastępuje float. Powoduje, że element wyświetlany jest jak liniowy, jednocześnie zachowując się jak element blokowy (można ustawić mu marginesy, wysokość, itd.). Niestety, jak już wspomniałem, IE6 nie radzi sobie z tym elementem. Okazuje się, że istnieje prosty fix, który można zastosować, aby inline-block działał poprawnie. Zaprezentuję to na przykładzie paginacji.
<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>
W normalnej przeglądarce zadziałałoby to:
ul {
text-align: center;
border: 1px solid #7e7e7e;
}
li {
display: inline-block;
}
li a {
display: block;
border: 1px solid #dbdbdb;
margin: 10px 0;
padding: 10px;
}
Ale nie w IE6. Na szczęście fix jest bardzo prosty i nie wymaga od nas wielkiego wysiłku. Wystarczy zmienić li na display: inline, a znacznik a na display: inline-block;
Ostatecznie CSS wygląda następująco.
ul {
text-align: center;
border: 1px solid #7e7e7e;
}
li {
display: inline;
}
li a {
display: inline-block;
border: 1px solid #dbdbdb;
margin: 10px 0;
padding: 10px;
}