浏览器兼容

一、如何调试 IE 浏览器

  • IE7版本以上可以按F12调出开发者工具进行调试。
Paste_Image.png
  • IE6版本可以使用border: 1px solid red;直接进行调试。
  • outline: 1px solid red;(ie6不支持)(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
  • 安装虚拟机,运行不同版本的IE来调试。
Paste_Image.png
  • 利用工具在各个版本之间测试,比如IETester,它是一个WebBrowser控件,包含有5.5到11等几个版本的IE浏览器,界面美观。

二、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?

  • 因为目前所有浏览器并没有统一对CSS的支持,因此会导致不同的浏览器生成的页面效果不一样。这个时候为了我们写的css能够兼容不同的浏览器,就有了css hack。
  • css hack大致有三种表现形式:css属性前缀法、选择器前缀法、ie条件注释法。
  • 属性前缀法:例如 IE6能识别“下划线”和“星号”,IE7能识别“星号”,但不能识别“下划线”,IE6~IE10都认识“\9”,但firefox前述三个都不能认识。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
  • **选择器前缀法:
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
  • ie条件注释:针对所有IE(注:IE10+已经不再支持条件注释):<![endif]-->
    在ie6下生效:
<!--[if IE 6]><p>这段文字只在IE6浏览器显示</p><![endif]-->```
在IE6以上版本生效:

```
非ie浏览器生效

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

三、列举几种浏览器兼容问题

  • inline-block属性
    can i use上显示不支持ie6、ie7。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task13</title>
    <style>
      div {
        display: inline-block;
      }
    </style>
  </head>

    <body>
    <div>你好</div>
    <div>饥人谷</div>
  </body>
</html>

inline-block属性在虚拟机ie6下的效果:

Paste_Image.png

解决方法:添加*display:inline,在虚拟机ie6下的效果:

 div {
        display: inline-block;
        *display: inline;           /* 应用hack */
      }
Paste_Image.png
  • 透明度opacity
    can i use 上显示i8以及以下版本都不支持

在ie6下显示:

Paste_Image.png

解决方法:添加filter:alpha(opacity=50);zoom:1

Paste_Image.png
  • min-height/width
    can i use上显示不支持ie6.

解决办法:

.selector { 
    height:auto !important; /*自适应*/
    height:100px;         /*固定宽度,兼容ie6*/
    min-height:100px;
 }

四、针对兼容、多浏览器覆盖有什么看法?渐进增强优雅降级是什么意思?

  • 要不要做
    • 产品的角度(产品的受众、受众的浏览器比例、效果有限还是基本功能有先)
    • 成本的角度(有无必要做某件事)
  • 做到什么程度
    • 让哪些浏览器支持哪些效果
  • 如何做
    • 根据兼容需求选择技术框架、库(jquery)

    • 根据兼容需求选择兼容工具(html5shiv.js, respond.js, css reset, nomalize.css, Modemizr)

    • 条件注释、CSS Hack、js能力检测做一些修补

  • 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

五、reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?

1.Normalize.css是保留浏览器的原来样式并且做到每个浏览显示一致。
2.CSS Reset相反把浏览器的默认样式都重置了

为什么推荐Normalize.css?

Normalize.css
是一种CSS reset的替代方案。经过@necolas@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样。
我们创造normalize.css有下面这几个目的:
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式:为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性:用一些小技巧
解释代码:用注释和详细的文档来

Normalize.css
支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。

工具名词解释

条件注释: 在HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
IE Hack: 针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
js能力检测: 浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测
html5shive.js: 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
respond.js: 是一个小脚本,用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计
css reset 去除浏览器默认的CSS样式
normalize.css: 可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一
modernizr: 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名
postCSS: 是一个使用JS 插件来转换CSS 的工具。 这些插件可以支持使用变量,混入(mixin),转换未来的CSS 语法,内联图片等操作。 简而言之,PostCSS 可以将CSS 转变成JavaScript 可以操作的数据格式

六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

  • IE盒模型和标准盒模型的区别:
    IE盒模型:盒子大小是设定的大小加上内外边距和边框
    标准盒模型: 盒子的大小就是width和height值
Paste_Image.png
  • 不添加doctype,也就是IE678怪异模式,使用的是IE盒模型;添加doctype,chrome, ie9+, ie678,使用的是标准盒模型。
  • box-sizing:border-box
    是css3属性,就是变成ie盒模型的计算方式,width=border+padding+content,这样就便于计算。

操作####

  • virtualbox 安装 xp 虚拟机
    由于virtualbox安装了总是有问题,无法使用,所有我用了另一个软件。
Paste_Image.png
  • 在 ie 6, 7, 8中展示 盒模型inline-blockmax-width的区别
  • 盒模型

ie6

Paste_Image.png

ie7

Paste_Image.png

ie8

Paste_Image.png
  • inline-block

ie6

Paste_Image.png

ie7

Paste_Image.png

ie8

Paste_Image.png
  • max-width

ie6

Paste_Image.png

ie7

Paste_Image.png

ie8

Paste_Image.png

(完)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、如何调试 IE 浏览器? 在IE7以上的版本中可以通过按快捷键F12调出开发人员调试框,如下图IE7以上调试工...
    dengpan阅读 564评论 0 2
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 484评论 0 1
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 1,135评论 2 17
  • 一、问答部分: 1. 如何调试 IE 浏览器? 如果是IE7版本以上可以使用自带的开发者工具,按F12,即可打开:...
    小木子2016阅读 557评论 0 0
  • 你看到的,那一片白原,深远辽阔,却什么也没有。你知道的,在一开始的地方,本来就虚无。我转世而来,忘断红尘旧事,纯真...
    采臣Allen阅读 398评论 0 1