码迷,mamicode.com
首页 > 其他好文 > 详细

hw1

时间:2018-03-26 00:51:31      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:包括   一段   head   red   样式   效果   前缀   dia   导入   

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

(1)
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

(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

hw1

标签:包括   一段   head   red   样式   效果   前缀   dia   导入   

原文地址:https://www.cnblogs.com/suruoxun/p/8647603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!