Chrome - 框阴影：活动导致底部填充消失答案

【问题标题】：Chrome - Box shadow on :active causes bottom padding to disappearChrome - 框阴影：活动导致底部填充消失
【发布时间】：2011-11-13 11:51:27
【问题描述】：

我想最好的展示方式是在一个例子中：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，其高度等于删除的填充量。

感觉真的很 hackish，这让我很不舒服，因为我以为我在停止为 IE 写东西时把它抛在脑后了，但是哦，好吧 ¯\_(ツ)_/¯

【问题讨论】：

【解决方案1】：

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

你必须有一个块

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

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

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

bug 的要求之一没有了，bug 本身也没有了。
如果标题中有很多文本，可以将其换行：http://jsfiddle.net/kizu/4GfWY/10/（我将那里的height 替换为min-height），这样按钮就不会覆盖标题的文本。李>

【讨论】：