Firefox and IE put padding/margins on <link/> elements. And weirdness with clearfix

问题

I had some problems with vertical spacing in Firefox and IE for an embarrassingly long time.

I am using a * selector in my css to apply margins to everything within a certain container element. Works fine in Chrome, however in FF and IE I was getting mysterious extra padding seemingly coming from nowhere, as you can observe here: http://jsfiddle.net/XrVXF/3/.

It turns out I had two separate problems. One is that non-Chrome browsers will select elements with the * selector and apply the margins and the margins show up in the browser! even though the element is invisible to things like Firebug. Should this be considered a bug? You may be asking what business is a link element doing inside the body tag. Well I could probably avoid it but it is the easiest way to do some things on my site. This page says that the * selector should only apply to block level elements in HTML5, which I am using, so in that sense it seems to me that Firefox at least is bugging out, and IE too if they are supposed to have proper HTML5 support yet. Now that I know this I can work around it but maybe there are other elements I should worry about too? (Doesn't seem to apply to script or style tags.) Would I be better off applying margins to a large list of html elements instead of *?

The other weird thing, which you can observe in the fiddle I linked is that the clearfix on the bottom (which is not necessary in the example, but is on my site) also picks up the margins and applies them in FF and IE but not in Chrome. Which is the 'right' behaviour? Strangely, I noticed that turning off overflow:hidden, prevents the clearfix from taking up space, and doesn't seem to have any detrimental effect on my site. What is overflow set to hidden for?

Correction: Oops, I was using .clear when I meant to be using .clearfix (which appends content after your floated stuff), which seems to work fine and doesn't have margin issues.

回答1:

Should this be considered a bug?

Considering you're applying styles to elements that are in places that they shouldn't be in the first place (link in body???), this is anybody's guess. The likely reason why they don't show up in Firebug is because Firebug isn't expecting them to be there.

In all seriousness, my best guess as to what's going on in your fiddle is:

• Chrome has a UA style for link elements to display: none. I imagine it does the same for any other elements that belong in the head element and not body.

• Other browsers have no default display style for link elements, instead relying on head to have display: none to hide everything that belongs in the head element as well. So when you place a link within body, it shows up with the margins because it's showing up with the initial value of display: inline.

  FWIW, if you give it a style of display: block, its margins will collapse and it'll have the same apparent effect as if it had display: none as in Chrome.

Again, this is based on invalid markup in your fiddle, so I can't say which browser, if any, is right or wrong since all the spec says is that the page head should not be rendered. Also, cue arguments/debates on whether this is a reason not to use the * selector, or a reason not to write invalid HTML, or both...

来源：https://stackoverflow.com/questions/12126320/firefox-and-ie-put-padding-margins-on-link-elements-and-weirdness-with-clear