[Solved] CSS on main element not working for iPhone

[Willem-Siebe]

Hi,

On my website I added the main element and did some CSS on it. However, interesting is that there are no problems, except for the iPhone browsers (standard, google chrome).

On Samsung only the standard browser has the same behaviour, others like Chrome and Firefox do listen to the CSS.

Others experiencing the same?

Kind regards,

Willem

[Paulie_D]

What issues are you actually having?

[Senff]

It looks like Safari iOS (as well as Chrome iOS) are treating the <main> element as an inline element, whereas other browsers treat it as a block-level element: http://codepen.io/senff/pen/CvKxA

[Willem-Siebe]

Ok, so you experience the same issues, thanks for testing. Any idea what I should do with this problem and should I send those browser an e-mail? Treat it as a block-level element makes more sense…

Kind regards,

Willem

[Willem-Siebe]

Yes, that’s the solution thanks. The html5shiv.js is already updated, but that only solves the problem for IE10 which also treats this main element as inline element. So I use html5shiv.js only for IE8 and lower, for the rest, also for the mobile browsers I was talking about, the display:block works perfect.

[Author]

Posts