Menu
Consider the following HTML markup. In most browsers that I have tested, the second list is displayed differently (each list item is indented).
The only difference between the two lists relates to the CSS font-style property, which I would not expect to change the list layout. Is there a explanation for this behavior?
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
span {float: left}
ul.bad span {font-style: italic}
</style>
</head>
<body>
<ul>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
<ul class="bad">
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
</body>
</html>
889
The span span with the straight text becomes 18 pixels in height, while the italic text forces the span to 19 pixels.
This causes a slightly different behaviour when using float: left.
span // <-- height: 18px;
.bad span // <-- height: 19px;
a quick fix would be to set the line height property equal for both span types:
span {float:left; line-height:15px;}
not regarding the intentions of your code ;)
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
