html5shiv icon indicating copy to clipboard operation
html5shiv copied to clipboard

<main> element in ie10

Open lafeber opened this issue 11 years ago • 5 comments

The html5shiv makes sure the main element works as expected in ie8 and ie9. Awesome!

In ie10 however, it doesn't work at all (it gets completely ignored).

lafeber avatar Aug 07 '13 09:08 lafeber

Hi Lafeber, [EDIT ONE HOUR LATER]

I having issues with the main element as well, but my html5shiv was not updated to the new version yet, so the main element was not included yet. Also theme maker applied the script only for IE8 and lower, what ofcourse makes no sense if there are problems in IE10 with the main element. Actually the only thing that IE10 needs is that you have the main element displayed as a block element. So CSS would do the job here. But... the script aplies this CSS as well, and to be honest I did not have any problems like you had, it worked perfect.

The only browsers where the script did not work, where the folllowing mobile browsers:

iPhone > Chrome and Safari Samsung Galaxy Note II > Standard Samsung browser

Is that normal? When I applied my own CSS to it (display: block;) this problem was solved.

Kind regards,

Willem

Willem-Siebe avatar Sep 24 '13 09:09 Willem-Siebe

Even when you target IE10 it doesn't work. You can add

main {display:block} 

to your css to make it work though.

lafeber avatar Sep 24 '13 10:09 lafeber

Yes, I need that, but ONLY for my mobile browser problems, see this video I just made that html5shiv works perfect on IE10: http://screencast.com/t/NnKTBpzPY4w

Willem-Siebe avatar Sep 24 '13 10:09 Willem-Siebe

It still doesn't work for me :) Via crossbrowsertesting.com, ie10 on Windows7. Then problem is that the top-margin of the main element is not picked up.

lafeber avatar Sep 24 '13 11:09 lafeber

Ok! I don't use a service like crossbrowsertesting.com yet, so I did not no IE10 on Windows 7 could act different then my IE10 on Windows 8. However, I targeted the html5shiv only to IE8 and lower again, because for IE9/10 and the mobile browsers the line display:block works as expected (although I did not test in on Windows 7!!) However, you also say this is working for you, so I'm confident my website displays correct now.

Willem-Siebe avatar Sep 24 '13 11:09 Willem-Siebe