15

如果您在 Chrome 中查看这个小提琴：http: //jsfiddle.net/up4Fa/

你会看到一个溢出的元素，里面有 20px 的填充！一切正常，按预期工作。

但是，如果您在 IE9 或 Firefox 中运行相同的测试，则底部的文本会触及容器的边缘，并且底部填充将被忽略...

如果我在内部 div 上进行填充，它会出现问题，但我宁愿用一个 div 修复它，并且不明白为什么 firefox 和 IE 都有问题，但 Chrome 没有？

编辑：文字不是万一有人想知道的原因！如果我删除文本，它会对红色框执行相同的操作。

谢谢

4

4 回答 4

20

似乎当您通过定位间接设置容器 div 的尺寸时，这些浏览器无法预测 div 的高度并正确呈现填充。解决此问题的一个快速而肮脏的技巧是删除容器的底部填充：

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

并为其最后一个孩子添加底部边距：

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/

于 2012-05-23T15:20:43.373 回答
4

在我看来，最好的方法是使用:after选择器

div.container:after{
    content:"";
    display:block;
    height:20px; /* Which is the padding of div.container */
}

http://jsfiddle.net/up4Fa/23/

于 2017-04-23T14:30:40.010 回答
1

这是我在使用 CSS 网格时的修复：

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}
于 2018-12-17T18:44:36.650 回答
0

视口单位一直存在争议，其中一些是因为移动浏览器如何通过对如何实现它们有自己的看法而使事情变得更加复杂。

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

在移动设备上查看单元的技巧

于 2020-12-16T23:16:21.397 回答