关于浏览器兼容
2016-09-28 本文已影响0人
JunVincetHuo
1. 如何调试 IE 浏览器
- IE7以上可以使用IE的调试台调控（自带IE 6及6以上调试）
- IE6只能用JS和BORDER一个一个调试
2. 什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 IE 7、IE 8的 hack 方式？
CSS hack是指使用特定的CSS样式来针对浏览器的BUG来兼容不同的浏览器。
-
属性注释法（css）
在元素的stayle前面加上特别的符号
如：（图片转载赖肖同学）
Paste_Image.png
-
条件注释法（html）
-
在IE下生效
-
在IE6下生效
-
在IE6及以上生效
-
IE下不生效
-
IE6下不生效
-
选择器注释法（CSS）
-
*html *前缀只对IE6生效
-
*+html +前缀只对IE7生效
3. 列举几种 浏览器兼容问题
- inline-block在IE 6 7下不支持
- IE8以下不支持background-size(CSS3大部分样式)
- opacity(透明度)IE8以下无效
4. 针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思
-
应该根据浏览器目前的占有率和自身项目是否应该兼容来决定是否兼容。
-
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（通俗点说就是针对某个版本的浏览器开发）
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（通俗说就是先针对高级的浏览器开发，开发完成后再慢慢适配低级的浏览器）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
5. reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
- 由于每个浏览器自带的样式不一样，reset.css的作用就是让他们一开始把样式全部去掉，类似于margin:0 padding:0.
-normalize.css - normalize.css是一种CSS reset的替代方案。它有下面这几个目的：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
同时，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
关于normalize.css
6.IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用
- IE盒模型的width=border+padding+内容宽度
标准盒模型的width=内容宽度 - 添加<!DOCTYPE HTML>就可 以使用标准盒模型
- box-sizing:border-box的作用是元素的内边距和边框不再会增加它的宽度，设置盒子的宽高为内容宽高、内边距、边框之和。
实操：
IE7
IE7状态.png
IE8
IE8.png
