内联元素和标记空白渲染问题

Question

Way back in the day, we had to deal with browsers adding white space between elements if in the source markup we also had white space.

I thought that issue had all but disappeared but I rant into a situation today where the problem still exists. What's odd is that the problem isn't confined to a particular browser. It shows up the same problematic way in Firefox, Safari, Chrome and Opera and only slightly differently in IE.

Sample CSS:

<style type="text/css">
li {
    display: inline;
    background: pink;
    margin: 0px;
    padding: 10px 0px;
}

li a {
    background: green;
    margin: 0px;
    padding: 0px;
}

</style>    

Sample markup:

<ul>
<li>
    <a href="#">hello</a>
</li>
<li>
    <a href="#">world</a>
</li>
</ul>

<ul>
<li><a href="#">hello</a></li>
<li><a href="#">world</a></li>
</ul>

<ul>
<li><a href="#">hello</a></li><li><a href="#">world</a></li>
</ul>

Only that last UL appears the way I'd like it to appear...with the A tags spanning the full width of the container LI tag.

Given the consistency across browsers, this maybe is actually rendering as it should? Short of reverting to old comment hacks (starting a comment on the end of one line and expanding to the beginning of the next) anyone know of a workaround for this or why this is doing what it does?

Ideally, I'd float my LI's instead, but due to some other issues keeping then inline would be preferred.

Answer 1

Yup, whitespace is whitespace when it comes to inline elements. That's almost always exactly what you want. Take, for example, the following:

<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>

Would suck pretty hard if that ended up rendered as:

I *really***really** want that whitespace.

If all the browsers render it a certain way, it's pretty likely that they're right and you're wrong. That goes double if all browsers except for IE render it a certain way...

Answer 2

I believe this is by design.
You have included white space (even if it is carriage returns) in your source so the browser is rendering this faithfully. I doubt there is a way around this apart from ensuring there is no white space between your elements.

Answer 3

您可以将容器的字体大小设置为0，例如将其放入div中，然后在LI项中设置propper font-size