Chrome - Box阴影打开：活动导致底部填充消失

Question

我想最好的方法就是举例：jsFiddle here

请注意，带有黑色边框的容器（.overlay_inner）的四周都有填充。如果单击右上角标有“选择”的按钮，容器的底部填充将消失！

这种奇怪的行为只发生在Chrome（版本13）中。我没有在IE或Firefox中看到它。

我把问题缩小到这个CSS块：

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. 您必须拥有

   块

   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的内部区块。

4. 如果您为此内部块更改box-shadow，则会发生错误。

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

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

1. 对bug的一个要求已经消失，而且bug本身已经消失。
2. 如果标题中包含大量文字，可以将其换行：http://jsfiddle.net/kizu/4GfWY/10/（我将height替换为min-height），因此按钮不会叠加标题的文字。