Zbędne marginesy w elementach listy w Internet Explorer
wrz 12
Zakładając, że chcemy sobie zrobić jakieś menu przy pomocy kodu typu:
<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:
#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
vertical-align: bottom;
do „#menu li a”.
Źródło: http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php
mar 05, 2009 @ 23:07:14
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