微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – Chrome和它对%s的处理

当使用百分比(%)来调整元素大小时,Chrome显然更喜欢用数学方法编写自己的规则.

据我所知,当你加80 20时,你会得到100;对?好的. Chrome也了解这一点.但是,如果我们以不同的方式写出相同的等例如:(78 1 1)(18 1 1)你得到了什么?是100吗?我也是.

那么有人可以告诉我为什么Chrome不这么认为呢?

取两个元素并将它们并排放在一起.然后,将宽度:20%应用于一个元素,将宽度:80%应用于剩余元素.您会注意到100%的页面(或容器)已被两个元素并排占用.但是,让我们保持简单,并在每个元素的两边添加仅1%的填充.这意味着一个元素的宽度为:18%;填充:1%,另一个元素宽度:78%;填充:1%.理论上,这应该仍然具有相同的结果:100%的页面(或容器)被两个元素并排占用.但在Chrome中,情况并非如此.它不足.

证据在布丁中:jsfiddle(如果你使用Chrome,你会注意到细微的差别).

这是令人沮丧的,因为当它全部加起来时,特别是并排使用更多的元素,它可以真正抛出一个布局.我知道通过创建子元素来处理填充和/或边距,我们可以避免这种情况,但这可能导致使用标记,否则这将是多余的.

我只需要解释为什么Chrome会以这种方式运行(也许它完全是一个Webkit的东西,我还没有测试过它).

解决方法

这是一个 bug.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。