未加星标

Header disappears and lists become unstyled in IE 8 and below

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

It was brought to my attention that in IE 8 and below, my header disappears and my lists become unstyled.

Meaning, they look different than what they should and they have bullets.

Why is this happening and how can I fix it.

I know I haven't included the html5 shim / html5 shiv yet, is that causing the header to disappear? What about my <main> element and the list-styling?

Here is a link to the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/search/new.html

And here is what it looks like in IE8: http://pageaffairs.com/sp/so-16270338.png

Problem courtesy of: Irfan Mir

Solution

As indicated in this question's accepted answer , IE8 does not treat HTML5 elements very nicely. Not only does it not style these elements, but it sometimes (as you are seeing) makes them seem to disappear entirely. I've seen this firsthand on a site my team developed. IE8 was turning all the <section> tags we had used into <section /> , which just messed up all of our content and styling. You're going to need to use the HTML5 shiv script to get it to work ( Modernizr fixed it for us, and the HTML5 shiv script is just a part of it, but you should likely only need the shiv script at a minimum).

Solution courtesy of: ajp15243

Discussion

Older IEs does not render HTML5 tags therefore your styling applied to them are ignored. (They don't even render as blocks like "oh well, lets pretend it's a div". No, it's totally ignored).

And yes, as you said, the best would be add html5shiv to the header of your code, like this:

<!--[if lt IE 9]> <script src="path/to/your/shiv.js"></script> <![endif]-->

This means that if l ower t han IE 9 , apply this script.

Additionally, the same occurs with CSS3 stuff, like border-radius and stuff. For that, use CSS3 Pie , which is handy.

.someRoundCorner { border-radius:4px; behavior:url(path/to/<strong>css3</strong>pie/htc); }

As a suggestion, for the time being still use divs with id equal to the HTML5 tag you actually wanted if your main audience uses IE < 9. Better than making use of .js (and if .js is disabled, layout will break like now). When the time comes when the old IEs are not more supported, will be easier to search and replace your documents having the id equal the tag you wanted.

Update: Your css is main ul, [role="main"] ul, #main ul , but since IE have no idea what is the tag main, it throws the UL out and so, your CSS selector does not match. See in this image that all elements he does not know, he transforms into an empty element:
Header disappears and lists become unstyled in IE 8 and below

On left is the code it actually rendered while the right is the real source. As you see, the UL is out of main .

Discussion courtesy of: RaphaelDDL

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,script,your,IE,main
分页:12
转载请注明
本文标题:Header disappears and lists become unstyled in IE 8 and below
本站链接:https://www.codesec.net/view/597052.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(9)