Zakładając, że chcemy sobie zrobić jakieś menu przy pomocy kodu typu:
1 2 3 4 5 6 7 |
<div id="menu"> <ul> <li><a>link1</a></li> <li><a>link2</a></li> <li><a>link3</a></li> </ul> </div> |
i użyjemy takiego CSSa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#menu li a{ border-color: #AEAEAE #AEAEAE #AEAEAE #8CCE20; border-width: 0 1px 1px 0; border-style: solid; color: #1F2024; display: block; font-family: Verdana; font-size: .775em; height: 14px; padding: 10px 0 8px 13px; text-decoration: none; } |
Internet Explorer doda niepotrzebną przestrzeń pod każdym elementem listy – przez co zostanie na przykład zaburzona ciągłość ramek. Sposobem na obejście problemu jest dopisanie linii
1 |
vertical-align: bottom; |
do „#menu li a”.
Źródło: http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php
Grzesiu
There is a easier way to achieve the same result.
Put
.........
everything in one line. Now Firefox, IE, Opera and other browsers render page in the same way 🙂