hw1

Posted suruoxun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了hw1相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

hw1 problem1

软件测试技术 hw1

3014218152 林默涵 HW1

hw1打卡

#SPM# HW1 for SPM

c_cpp dsnp2015 hw1