JellyFish wrote:You means to say, the standards defines this unexpected behavior?
I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent. Consider the following example:
Code: Select all
<style type="text/css">
#outer {
width:100px;
height:100px;
background:red;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
It would look like this (stars represent border of inner div, dashes - border of outer one, dots are page background):
Code: Select all
...............................
+----------+...................
|**********+***********........
|* | *........
|* A | B *........
|* | *........
++---------+ *........
.* *........
.* *........
.* C D *........
.* *........
.**********************........
...............................
Now let's change overflow properties on outer div to look like your example: overflow-x:visible and overflow-y: hidden, and then consider if different parts of inner div (marked with A, B, C and D) should be visible.
- Part A does not overflow anything, so it's visible.
- Part B does overflow on the right, so it should be visible according to overflow-x: visible
- Part C does overflow to the bottom, so it should be hidden according to overflow-y: hidden
- And now the most interesting part: part D. It does overflow both on the right and to the bottom, so should it be visible or not?
point 4 above shows inconsistence of such style combination. This is why browsers reject your styling.