我想最好的展示方式是在示例中: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
,其高度等于删除的填充量。
感觉真的很黑,这让我很不舒服,因为我以为我在停止为 IE 编写代码时就把它留在了后面,但是哦,好吧 ¯\_(ツ)_/¯
最佳答案
我设法将测试用例缩小为:http://jsfiddle.net/4GfWY/8/我发现这个错误发生的要求是:
你必须有一个 block
overflow: auto; position: relative;/* Or on any other block in this but over absolute one */ padding-bottom: 100px;/* Any bottom padding */
一些会导致垂直滚动条的内容。
具有
position: absolute
的内部 block 。如果您随后更改此内部 block 的
box-shadow
,则会出现错误。
所以,可以有很多解决方法,我认为最好的是:http://jsfiddle.net/4GfWY/9/
我将 position: absolute
替换为 float: right
(并做了一些其他相应的更改),所以:
- bug 的要求之一消失了,bug 本身也消失了。
- 如果标题中有很多文字,可以将其换行:http://jsfiddle.net/kizu/4GfWY/10/ (我将
height
替换为min-height
),这样按钮就不会覆盖标题的文本。
关于html - Chrome - :active causes bottom padding to disappear 上的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7356996/