padding为百分比时Safari中clientWidth/offsetWidth值异常问题咨询

这大概率是Safari的布局计算bug，而非你的理解错误。

原因分析 #

• 当子元素.arrow使用百分比padding时，Safari在计算父元素.carousel的clientWidth时，会错误地被子元素的百分比padding计算逻辑干扰，导致父元素的实际可计算宽度被无端压缩，所以返回了471而非设置的500px。
• 换成像素值padding后，子元素的尺寸计算完全确定，不会触发Safari这个异常的布局计算逻辑，因此clientWidth能正确返回500px。

验证与规避方案 #

• 先检查.carousel的box-sizing属性：如果是border-box，且自身没有内边距/边框，那clientWidth理应等于设置的500px；如果是content-box，clientWidth是内容宽度加自身内边距，这种情况下出现数值偏差更能说明是浏览器bug。
• 可以尝试给.carousel添加overflow:hidden属性，强制Safari正确计算父元素宽度，可能能解决这个问题。
• 最稳妥的方式还是改用固定单位（比如px）设置.arrow的padding，彻底规避这个Safari特有的问题。

内容的提问来源于stack exchange，提问作者Guesser