关于兼容那点事

2016-03-20 本文已影响107人燃烧吧_小宇宙

1、如何调试 IE 浏览器？

使用高版本IE控制台，使用开发者工具，选择低版本IE浏览器。（IE7以上）
安装虚拟机，在虚拟机中安装IE 浏览器进行调试。
IE6可以使用tester进行调试。
2、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
1、CSS hack方式一：IE条件注释法

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

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

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

2、CSS hack方式二：CSS属性前缀法

-“-″减号是IE6专有的hack
-“\9″ IE6/IE7/IE8/IE9/IE10都生效
-“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
-“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

3、CSS hack方式三：选择器前缀法

*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、列举几种浏览器兼容问题？

不同浏览器的标签默认的margin和padding不同。解决方法：*{margin:0;padding:0;}
图片默认有间距。解决办法：使用float属性为img布局
display:inline-block;IE6 7 不兼容。解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
4、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
兼容、多浏览器覆盖，针对一个项目来说，如果考虑太多浏览器的兼容，是需要花费时间和精力来更新的，如果只有5%的人在用一种浏览器，就不需要兼容，例如淘宝已经不兼容IE6，因为没有很多人在用。所以想达到多浏览器覆盖是不可能的。
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
参考
5、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
reset css的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性；
normalize.css的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
1保护有用的浏览器默认样式而不是完全去掉它们
2一般化的样式：为大部分HTML元素提供
3修复浏览器自身的bug并保证各浏览器的一致性
4优化CSS可用性：用一些小技巧
5解释代码：用注释和详细的文档来
参考
6、在 ie 6, 7, 8中展示盒模型、inline-block、max-width的区别?

<head>
  <meta charset="utf-8">
  <title>测试</title>
  <style>
  .box1{
  border: 10px solid ;
  background:red;
  height:100px;
  width:100px;
  margin:50px;
  padding:50px;
}
.box2>li{
    display:inline-block;  
}
.box4,.box3{
    display:inline-block;
}
.box5{
  max-width:300px;
  height:100px;
  background:pink;
  margin:0 auto;
}</style>
</head>
<body>
  <div class="box1">盒模型</div>
  <div class="box2">
    <ul>
      <li>box1</li>
      <li>box2</li>
      <li>box3</li>
    </ul>
  </div>
  <div class="box3">你好</div>
  <div class="box4">前端</div>
  <div class="box5">max-width</div>
</body>

IE8

0_1458445817178_8.png

IE7

0_1458445834174_7.png
IE5

0_1458445844470_5.png

关于兼容那点事

猜你喜欢

热点阅读