本教程版权归小圆和饥人谷所有,转载须说明来源
问答
1. 如何调试 IE 浏览器
- 使用高版本IE的控制台(IE6/7以上)
- border: 1px solid red;
- outline: 1px solid red;
- javascript:alert(document.get...)
2. 什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 IE 7、IE 8的 hack 方式?
- CSS hack:由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox /Safari /Opera /Chrome 等)对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
- hack:
- 属性前缀法(即类内部Hack):例如 IE6能识别下划线
_
和星号*
,IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。 - IE条件注释法(即HTML条件注释Hack),针对所有IE(注:IE10+已经不再支持条件注释),针对IE6及以下版本:
。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
- IE 7、IE 8的 hack 方式:
.selector { property: value\9; }
.selector { property/*\**/: value\9; }
//支持IE6-8
3. 列举几种 浏览器兼容问题
- IE6/7不支持inline-block
- IE6不支持除了a标签以外的hover属性
- IE6不支持CSS3的特性
4. 针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
也许有各种fallback方案可以保证完全兼容性各个浏览器,但依然不能保证低端浏览器的使用体验,顶多是看起来各个浏览器都一样了。因此,现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计,同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6,提示用户使用高端浏览器。
因此不要再考虑向后兼容,应该考虑向后退化,更多考虑向前兼容。
渐进增强:一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。
优雅降级:一开始就构建站点的完整功能,然后针对浏览器进行测试和修复。
5. reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?
reset.css:在HTML标签在浏览器里有默认的样式(例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式)不同浏览器的默认样式之间也会有差别(例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。)在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
nomalize.css:只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset
,Normalize.css
是一种现代的、为HTML5准备的优质替代方案。
推荐nomalize.css的原因:
Normalize 相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。
Reset 相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。
Normalize 给我的感觉就是不讲求样式一致,而讲求通用性和可维护性。
这点可以从详细的注释和模块化的结构体现出来。
6. IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?boxsizing:border-box
有什么作用
区别:ie678怪异模式(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度;chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度。
在IE7、8文档头部添加doctype声明可以使用标准盒模型。
box-sizing:border-box:为元素设定的宽度和高度决定了元素的边框盒,就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内绘制,通过已设定的宽度和高度减去内边距和边框才能得到内容的宽度和高度。