当孩子比父母宽时，Chrome和Safari无法正确计算利润率 [英] Chrome and Safari Calculate Margins Incorrectly When Child is Wider Than Parent

问题描述

这里是一个示例(一个警告框将弹出并显示结果).先在Firefox中运行，然后在Chrome和/或Safari中运行

Here's an example (an alert box will pop up with the results). Run this in Firefox then Chrome and/or Safari

http://jsfiddle.net/QeaVM/

请注意FF如何在outerWidth的计算中正确地包括左右边距.请注意，Safari/Chrome如何错误地指出#Container的externalWidth等于#Frame的外部宽度.

Notice how FF correctly includes the left and right margins in the calculation of outerWidth. Notice how Safari/Chrome incorrectly state that the outerWidth of #Container is equal to that of #Frame.

另外，请注意，当Safari/Chrome明确将其设置为300px时，错误地将#Container的margin-right报告为负数

Also, notice that Safari/Chrome incorrectly report #Container's margin-right as a negative number when it is explicity set to 300px

这是Web-kit还是jquery中的错误?

Is this a bug in web-kit or jquery?

推荐答案

在两种浏览器的检查器中查看页面(完全忽略javascript)，您会看到相同的区别(因此排除了jQuery).

looking at the page in the inspectors for both browsers (ignoring javascript completely) you can see the same differences (so that rules out jQuery).

这看起来确实很奇怪，并且似乎是通过webkit报告的错误.

It does seem odd and appears to be reported bug with webkit.

https://bugs.webkit.org/show_bug.cgi?id=13343

https://bugs.webkit.org/show_bug.cgi?id=24511

评论中提到了一种解决方法:一种解决方法是将元素设置为显示:无(或内联块)，测量边距，然后将显示设置回块."

The comments mention a workaround "A workaround is setting the element to display:none (or inline-block), measuring the margin then setting display back to block."

这篇关于当孩子比父母宽时，Chrome和Safari无法正确计算利润率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！