浏览器兼容

字数 1765阅读 73

一、问答

如何调试 IE 浏览器
  • IE7以上使用控制台调试
  • IE6用border或者outline来识别元素边界调试
  • 通过IE窗口执行js调试
  • 通过IEtester或其他测试软件调试
  • 通过安装虚拟机,直接在对应IE版本来查看效果进行调试。
什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 IE 7、IE 8的 hack 方式?
  1. 由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
    这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack。

  2. CSS Hack有三种表现方式。

    • 属性前缀法(即类内部hack):例如IE6能识别下划线“”和星号“”。IE7能识别星号“”但不能识别下划线“”,IE6~IE10都认识“\9”,但firefox前述三个都不能认识。

    • 选择器前缀法(即选择器hack):例如IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}

    • IE条件注释法(即HTML条件注释hack):IE专有的hack方式(注:IE10+已经不再支持条件注释)。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
      <pre><code>针对所有IE:

      针对IE6及以下版本:

      非IE浏览器:

      针对IE6以及IE6以上版本:

      </pre></code>
      史上最全CSS hack
      browserhacks

列举几种浏览器兼容问题
  • inline-block不兼容ie6/7。
    • 方法一:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。兼容各浏览器的代码如下:* div {display:inline-block;**display:inline; *zoom:1;...}
    • 方法二:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下:div {display:inline-block;...}div {*display:inline;}
针对兼容、多浏览器覆盖有什么看法?渐进增强优雅降级是什么意思?
  1. 根据项目需求,当客户需要兼容低版本浏览器时,那我们就需要针对这个需求去做兼容处理,一般低版本浏览器不可能兼容到显示达到完美,我们只需要保证不影响正常功能使用和基本布局不乱就行了。在可以沟通的情况下可以尽量说服客户放弃IE6/7

  2. 渐进增强:一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。
    优雅降级:一开始就构建站点的完整功能,然后针对浏览器测试和修复

reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?
  1. reset.css和normalize.css分别是做什么的?
  • reset.css:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

  • normalize.css:Normalize.css是一种CSS reset的替代方案。
    有下面这几个目的:

    • 保护有用的浏览器默认样式而不是完全去掉它们
    • 一般化的样式:为大部分HTML元素提供
    • 修复浏览器自身的bug并保证各浏览器的一致性
    • 优化CSS可用性:用一些小技巧
    • 解释代码:用注释和详细的文档来
      支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。
  1. 为什么推荐使用 nomalize.css?
  • Normalize.css 保护了有价值的默认值
  • Normalize.css 修复了浏览器的bug
  • Normalize.css 不会让你的调试工具变的杂乱
  • Normalize.css 是模块化的
  • Normalize.css 拥有详细的文档

参考

IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用
  1. 从下图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

    1.jpg

    从下图可以看到** IE 盒子模型**的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
    2.jpg

    参考

  2. IE6、7、8添加文档声明(doctype)即可使用标准盒模型。

  3. box-sizing:border-box;是CSS3新增属性,了解这个属性,我们先从块级元素的盒子大小说起。
    通常一个标准盒模型下的块级元素实际所占宽高度=外边距(margin)+ 边界宽度(border-width) + 内边距(padding)+ 高度(height) / 宽度(width);
    如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin)。
    这个属性多用于排版问题,很多情况下很实用,简化了计算位置的问题。

二、 操作

因电脑配置问题,暂时没有安装虚拟机。

本教程版权归作者和饥人谷所有,转载须说明来源!

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
  • 1. 如何调试 IE 浏览器? IE7及以上版本有调试台,可以按F12启动:优点:权威;缺点:不方便,正常情况下只...
  • 一、问答部分: 1. 如何调试 IE 浏览器? 如果是IE7版本以上可以使用自带的开发者工具,按F12,即可打开:...
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...