See this example: http://jsfiddle.net/vrgT3/5/
I made a 250x250px parent div with overflow: auto; so scrollbars appear when the content overflows the box. I have set a blue background to make it clear when the parent is visible.
Inside the parent is a child div with red background for visibility. It has 8px black borders and box-sizing: border-box; so padding and borders are included in computing the size of the box. The child div is set to min-height: 100% and min-width: 100%.
Expected result: Child div should be the exact same size as the parent, so no blue is shown and no scrollbars appear. The computed box size (content+padding+borders) should be 250x250px. There should be 8px black borders inlaying this, leaving a 234x234px red region.
Works with:
- Midori 4.1 Ubuntu
- Chromium 16 Ubuntu
- Opera 11.61 Ubuntu
Issues with:
IE 8 WinXP: Horizontal and vertical scrollbars appear. The content is 249x266px with 8px borders giving a computed box size of 265x282px.
Firefox 3.6 WinXP: Vertical scrollbar appears. The content is 217x250px and computed box size is 233x266px.
Firefox 10 Ubuntu: Vertical scrollbar appears, content is 221x250px, computed box size is 237x266px.
I have checked caniuse.com and it appears that at least the browsers in question support the required min-height, min-width, and box-sizing. What gives?
Solution: As Marat suggested, this is indeed a browser bug. I've resolved a workaround utilizing JavaScript to add padding/margins to correct for differences in offsetWidth/Height. See it here: http://jsfiddle.net/vrgT3/8/
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
