兼容性/css hack/normalize.css

1.如何调试 IE 浏览器

  • 使用高版本IE的控制台(IE8+)
  • border: 1px solid red; 或outline: 1px solid red;(outline的好处是不占宽度,但有些IE6/7不支持)
  • 在浏览器地址栏输入javascript:alert(document.get…),
    如:javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")

2.什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 IE 7、IE 8的 hack 方式?

不同的浏览器对css的解析方式不一样,会导致页面在不同浏览器下表现不一致,针对不同的浏览器写不同的css样式,使得页面最终在不同浏览器表现大体相同,这就叫css hack。

  • css 中写hack的方式:属性加前缀。
    下划线:如.selector { _color: red; } ,IE6能识别,IE7不能识别;
    星号:如 .selector { *color: red; } ,IE6和IE7都能识别;
    \9:如.selector { color: red\9; } ,IE6/7/8都能识别;
  • html中写hack:添加条件注释。(IE10开始不支持cc注释了。)
    如:下面的条件注释表示IE8及以下将应用ie8.css样式。

3.列举几种 浏览器兼容问题

  • IE6/7只支持inline转换成inline-block,不支持block转换成inline-block
    解决方法:.sellector { display:inline-block; *zoom:1; *display:inline;}

  • IE6/7只支持a标签使用hover,不支持其他标签使用hover。

  • IE6/7不支持最大最小宽高

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

  • 在开发网页的时候,不可能做到所有的浏览器都兼容,而应该根据浏览器市场占有率,兼容主流、淘汰末流。而且并不需要页面在各个浏览器上表现效果都一致,对于高级浏览器功能全开,提供最好的用户体验。对于低级浏览器页面展示效果可以降低标准。
  • 渐进增强:先兼容低版本浏览器使其实现基本的功能,再对高级浏览器进行效果、交互等改进和追加功能。
  • 优雅降级:一开始就针对高版本浏览器进行页面构建,然后再针对低版本浏览器进行兼容。

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

两者都是全局样式重置,reset.css相对暴力,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。normalize 相对平和,注重通用的方案,重置掉该重置的样式,保留有用的 浏览器默认样式,同时进行一些 bug 的修复。这点是 reset.css 所缺乏的,也是推荐使用normalize.css的原因。

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

IE盒模型:width=内容宽度+border宽度+两侧内边距宽度;
标准盒模型:width=内容宽度;
box-sizing:border-box,声明盒子遵从IE盒模型规则;

7.在 IE 7、8 中展示 盒模型、inline-block、max-width的区别

代码

  • 没写doctype声明的情况下:IE7/8中表现一样,盒模型是IE盒模型,inline-block都不生效,max-width不起作用


    兼容性/css hack/normalize.css_第1张图片
  • 写了doctype声明的情况下:盒模型都是按照标准盒模型解析的,inline-block在IE8下有效,在IE7下依然无效,max-width都起作用。


    兼容性/css hack/normalize.css_第2张图片

© 本文归饥人谷和本人所有,如需转载请注明来源。

你可能感兴趣的:(兼容性/css hack/normalize.css)