1.在开发前端页面时,打开新的构建网页,出现“无样式内容闪烁”。即网页只显示html无法立即显示css样式,出现一小段时间的样式闪烁。
原因:<style type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
解决方法:要在<head>之间加入一个<link>或者<script>元素就可以了。
2.不同浏览器对css的解析认识不一样,造成有些语法老的浏览器等可能不兼容,或者相同的css在不同的浏览器上表现的形式不同
解决方法:CSS hack
(2)
*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media screen\9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
(3)在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
-
“-″减号是IE6专有的hack
-
“\9″ IE6/IE7/IE8/IE9/IE10都生效
-
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
-
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack