I suppose the best way to show this is in an example: jsFiddle here
Notice that the container (.overlay_inner
) with the black border has padding on all sides. If you click on the button in the top right labeled "select" the container's bottom padding disappears!
This strange behavior only occurs for me in Chrome (version 13). I don't see it in IE or Firefox.
I've sort of narrowed the problem down to this block of CSS:
input[type=button]:active {
background: -webkit-linear-gradient(top, #eaeaea, #e2e2e2);
box-shadow: inset 0 0 3px #aaa;
}
Relevant part is the box-shadow
. When I remove that bit of CSS, the problem doesn't occur. Doesn't make sense to me, though. Any thoughts?
EDIT: Pote开发者_运维百科ntial work-around found. I removed the container's bottom padding and added a placeholder div
at the bottom with a height equal to the padding amount removed.
Example: jsFiddle here
Feels really hackish which makes me uncomfortable since I thought I left that behind when I stopped writing for IE, but oh well ¯\_(ツ)_/¯
I managed to minify the test case to this: http://jsfiddle.net/4GfWY/8/ and I found that the requirements for this bug to occur are:
You must have a block with
overflow: auto; position: relative;/* Or on any other block in this but over absolute one */ padding-bottom: 100px;/* Any bottom padding */
Some content that would cause a vertical scrollbar.
An inner block with
position: absolute
.And if you'd then change
box-shadow
for this inner block, the bug occurs.
So, there can be a lot of workarounds, the best I think is: http://jsfiddle.net/4GfWY/9/
There I replaced the position: absolute
to float: right
(and made some other corresponding changes ), so:
- One of the requirments for bug is gone, and the bug itself is gone.
- If you'd have a lot of text in title, you could make it wrap: http://jsfiddle.net/kizu/4GfWY/10/ (I replaced there
height
tomin-height
), so the button wouldn't overlay the title's text.
精彩评论