Firefox和IE穿上＆LT填充/利润率;链接/＆GT;元素。和古怪与clearfix [英] Firefox and IE put padding/margins on <link/> elements. And weirdness with clearfix

问题描述

我遇到了一些问题，在Firefox和IE的垂直间距为尴尬的很长一段时间。

我使用的是 * 选择在我的CSS在一定容器元素中应用边距的一切。作品在Chrome罚款，但在FF和IE浏览器我得到神秘微胖不知从哪儿来了貌似，你可以在这里看到：的 http://jsfiddle.net/XrVXF/3/ 。

原来我有两个不同的问题。其一是，非Chrome浏览器将选择 * 选择元素，并应用了利润率和的页边距在浏览器中显示出来！的，即使元素是不可见的东西类似Firebug。 如果这被认为是一个错误吗？您可能会问什么业务是一个链接元素body标签里面做的事情。嗯，我也许可以避开它，但它是做我的网站上一些事情的最简单方法。 本页面说， * 选择应只适用于阻止HTML5级元素，而我使用的，所以在这个意义上，它在我看来，火狐至少被窃听了，和IE太多，如果他们都应该有正确的HTML5的支持呢。现在，我知道这是我可以解决，但，也许还有其他因素我应该担心吗？（似乎并不适用于脚本或风格的标记。）我会更好关闭应用利润率为HTML元素，而不是大名单 * ？

另外奇怪的事情，你可以在我挂了小提琴观察是，在底部的clearfix（这是不是在这个例子必要的，但在我的网站）也拿起毛利率和FF适用于他们， IE浏览器，但无法在Chrome中。 这是正确的行为奇怪的是，我注意到，关闭溢出：隐藏，prevents从占用空间的clearfix，似乎并没有让我的网站上的任何不利影响。 什么是溢出设置为隐藏？

更正：哎呀，我使用.clear时，我的意思是使用.clearfix（追加的浮动东西后的内容），这似乎是做工精细，没有保证金的问题。

解决方案

  

如果这被认为是一个错误吗？

考虑你的体链接 code>？），这是任何人的猜测。可能的原因，为什么他们不萤火虫出现，是因为萤火虫不希望他们在那里。

在所有的严重性，我最好的猜测是在你的小提琴是怎么回事是：

• 铬对链接元素的UA风格显示：无。我想它确实为属于在头元素和其他元素一样不体。




• 其他浏览器没有默认显示风格链接元素，而不是依赖于头有显示：无来隐藏在头属于一切元素为好。所以，当你把一个链接在体，它显示了利润率，因为它显示了的初始值显示：内联

  FWIW，如果你给它的风格显示：块的利润率将崩溃，它会具有相同的明显效果，如果它有显示：无作为在Chrome。

再次，这是根据你的提琴无效的标记，所以我不能说哪个浏览器，如果的任何的，是对还是错，因为所有的规范说的是，页头不应该呈现。此外，提示参数/这是否是一个理由不使用 * 选择，或者理由不写无效的HTML，或两者的争论...

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.

解决方案

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...

这篇关于Firefox和IE穿上＆LT填充/利润率;链接/＆GT;元素。和古怪与clearfix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！