html - Chrome - :active causes bottom padding to disappear 上的框阴影

Question

我想最好的展示方式是在示例中:jsFiddle here

请注意，带有黑色边框的容器 (.overlay_inner) 四周都有内边距。如果您单击右上角标有“选择”的按钮，容器的底部填充就会消失!

这种奇怪的行为只发生在我的 Chrome(版本 13)中。我在 IE 或 Firefox 中看不到它。

我已经将问题缩小到这个 CSS block :

input[type=button]:active {
    background: -webkit-linear-gradient(top, #eaeaea, #e2e2e2);
    box-shadow: inset 0 0 3px #aaa;
}

相关部分是box-shadow。当我删除那部分 CSS 时，问题就不会发生。不过对我来说没有意义。有什么想法吗？

编辑:找到了潜在的解决方法。我删除了容器的底部填充，并在底部添加了一个占位符 div，其高度等于删除的填充量。

示例:jsFiddle here

感觉真的很黑，这让我很不舒服，因为我以为我在停止为 IE 编写代码时就把它留在了后面，但是哦，好吧 ¯\_(ツ)_/¯

Answer 1

我设法将测试用例缩小为:http://jsfiddle.net/4GfWY/8/我发现这个错误发生的要求是:

1. 你必须有一个 block

   overflow: auto;
   position: relative;/* Or on any other block in this but over absolute one */
   padding-bottom: 100px;/* Any bottom padding */
   

2. 一些会导致垂直滚动条的内容。

3. 具有position: absolute 的内部 block 。

4. 如果您随后更改此内部 block 的 box-shadow，则会出现错误。

所以，可以有很多解决方法，我认为最好的是:http://jsfiddle.net/4GfWY/9/

我将 position: absolute 替换为 float: right (并做了一些其他相应的更改)，所以:

1. bug 的要求之一消失了，bug 本身也消失了。
2. 如果标题中有很多文字，可以将其换行:http://jsfiddle.net/kizu/4GfWY/10/ (我将 height 替换为 min-height)，这样按钮就不会覆盖标题的文本。