首页 文章

在父母的填充上100％高度img的Safari边框高度错误

提问于
浏览 次
2

在Safari中使用 box-sizing: border-box 时，在使用 height: 100% 和父元素上的填充时，会出现影响 img 元素高度的错误 .

看到这个小提琴，并在Chrome / Firefox和Safari之间进行测试，看看它们之间的区别：https://jsfiddle.net/Arko/66b9bt02/1/

以下是完整的参考代码：

HTML：

<div>
  <img src="http://placehold.it/40x40">
</div>

CSS：

* {
  box-sizing: border-box;
}

div {
  padding: 15px;
  height: 50px;
}

img {
  height: 100%;
}

使用边框大小时，img高度应为20px（50px div高度减去2x 15px填充） . 这在Chrome和Firefox中是正确的 . 但Safari以30px的高度显示图像 .

  • 如果我们在宽度而不是高度上测试它，没问题 .

  • 如果我们删除填充或注释掉边框样式，没问题 .

  • 如果我们使用其他块元素（例如div而不是img）来测试它，则没有问题 .

我发现没有报告此问题的其他实例 . 这是一个新的webkit bug报告吗？或者我错过了什么？

（在Safari 9.1.1和Webkit Nightly 202811中测试过）

css safari webkit height box-sizing

1 回答

  • 2

    添加高度为100％的图像包装，填充0：

    https://jsfiddle.net/vgdz2Loj/

    <div>
  <div class="wrapper">  
    <img src="http://placehold.it/40x40">
  </div>
</div>

.wrapper {
  height: 100%;
  padding: 0;
}
    回复于

相关问题