All geek questions in one place

Safari on iOS6 handles display: table in different ways

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

In iOS5, display:table forces the div to box-sizing: border-box mode and ignores any attempt to override the window size.

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

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

My question is: do I get it right? There is an easy way to get a div with DISPLAY: TABLE, and the left pad will be the same width on iOS5 and iOS6.

FYI the reason I use DISPLAY: TABLE is because it allows just the vertical centering of my content, which has a variable height.

+4
source share
3 answers

Just in case, this will help someone in the future, this answer solved the problem for me. I moved the pad from an element styled to display: table; , in the style specified in display: table-cell; .

+3
source

I ran into the same problem and could not find any documentation other than this publication. Fortunately for me, it turned out that the container does not require a table: the display property.

However, I checked whether the display: table-cell shows the padding in the same way as the display: table, and it turns out that it doesn't. Therefore, perhaps try applying the display: table property to the parent container (without filling, of course), and try displaying: table-cell on the div of interest.

+2
source

You tried to add

 box-sizing: border-box

This will not affect iOS5, but it will probably fix the display on iOS6 if you speak correctly. Sorry, there is no way to check on iOS6

+1
source

Source: https://habr.com/ru/post/1435456/

More articles:


All Articles