如何调试 IE 浏览器
- 若ie8及以上版本中,可以使用控制台(按f12调出)进行调试,在控制台上可以切换不同的浏览器版本进行模拟,但没有ie6;
- 添加边框border 或者outline产看布局,进行调试,注意ie6下不支持outline;
什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
- 由于不同厂商的浏览器或浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack;
- hack的书写有以下三种方式:
1
2
3
4
5
6
7
8
9
10
11
121、属性前缀法(即类内部Hack),例如 IE6能识别下划线”_“和星号”*”,IE7能识别星号”*”,但不能识别下划线”“;
2、选择器前缀法(即选择器Hack),例如 IE6能识别* .class{},IE7能识别*+ .class{};
3、IE条件注释法(即HTML头部引用if IE)例如:
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
列举几种 浏览器兼容问题
- ie6或ie7不支持部分标签和属性,比如display:inline-block,但是支持display:inline,同样的还有min-height,它在ie6下不支持;
- 不同浏览器的默认样式差异较大,比如padding和margin。
针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
- 兼容、多浏览器覆盖是一个历史遗留问题,是随着浏览器的发展和w3c标准的建立而产生的。在写code的时候要分清主次,即先抓住主要需求,针对主流浏览器去开发,然后才去解决兼容、多浏览器覆盖问题,先完成基本功能和样式的实现,再完美细节;
- 渐进增强是一个追加功能的过程,侧重于内容本身,首先针对低版本浏览器构建页面,保证最基本的功能,然后再针对高版本浏览器来改进样式的表现、交互的体检等,提高用户体验度;
- 优雅降级针对那些最高级、最完善的浏览器来设计网站,将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,在这种设计范例指引下,旧版浏览器并非关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?
- reset.css就是重置样式覆盖浏览器的默认样式以达到统一的表现效果。
- Normalize.css是reset.css的改良版,在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
- 它有以下优点:
1.Normalize.css 保护了不同浏览器中有价值的默认值,而不是像reset一样重置所有样式;
2.Normalize.css修复了常见的桌面端和移动端浏览器的bug,修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug;
3.Normalize.css不会在浏览器调试工具中出现大段大段的继承链,避免调试工具变的杂乱;
4.Normalize.css 是模块化的,由多个相关却又独立的部分组成,这能让你自己选择性地移除掉某些永远不会用到部分;
5.Normalize.css的代码基于详细而全面的跨浏览器研究与测试,拥有详细的文档。
IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
- 在ie678怪异模式(不添加 doctype)下,浏览器将会使用 ie 盒模型,这种情况下盒模型的宽度=边框+padding+内容宽度
- 当添加 doctype声明后, chrome, ie9+, ie678使用标准盒模型, 即盒模型的宽度= 内容宽度
- box-sizing属性有三个取值:
安装virtualbox
正常浏览器显示效果
标准模式IE6中显示效果:
混杂模式(没有声明doctype)IE6中显示效果:
标准模式下IE7中的显示效果:
混杂模式下IE6中显示效果: