Safari on iOS6 treats display:table differently

Question

Safari on iOS6 appears to treat display:table differently (compared to Safari on iOS5 and Safari on my PC).

On iOS5, display:table forces a div into box-sizing: border-box mode, and ignores any attempt to override the box-sizing.

On iOS6, display:table forces a div into box-sizing: content-box mode, and also ignored any attempt to override.

The outcome is that DIV DISPLAY:TABLE WIDTH 250px PADDING-LEFT: 50PX will be 250px wide on iOS5 and 300px wide on iOS6.

My question: Is my understanding of this correct? Is there a simple way of getting a div with DISPLAY:TABLE and a left padding to be the same width on iOS5 and iOS6.

FYI the reason I am using DISPLAY:TABLE is because it allows simple vertical centering of my content, which has variable height.

Answer 1

Just in case it helps someone in future, this answer solved the issue for me. I moved the padding from the element styled with display: table; to the one styled with display: table-cell;.

Answer 2

I ran into this same issue and couldn't find any documentation other than this posting. Fortunately for me, it turned out that the container in question didn't need the table: display property.

However, I did test to see if display: table-cell applied the padding the same way as display: table, and it turns out it doesn't. So maybe try applying the display:table property to the parent container (free of padding, of course) and try display: table-cell on the div in question.