1、如何调试 IE 浏览器
高版本的IE(7以上)存在开发者工具,可以直接使用调试。
可以安装虚拟机再安装不同版本的IE去调试
在CSS中使用border: 1px solid red;和outline:1px solid red;显示盒模型调试
用IETest调试,模拟不同版本的IE浏览器
2、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
CSS hack:由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS hack一般有3种表现形式CSS内部hack、选择器hack、及HTML头部引用(if IE)hack。
CSS内部hack:主要针对内部hack;比如IE6能识别下划线“”和“”,IE7能识别“”但不能识别下划线,而Firefox两个都不认识。background:#ff0; /* for all browsers /_background:#f00; / for ie6/background:#f0f; /* for ie6~7 /background:#00f\9; / for ie6~10 */
选择器hack:比如IE6能识别HTML.class{},IE7能识别+HTML.class{}或者.first-child+html.class{}。等等html .class{}/* for IE6 /+html .class{}/* for IE7 /:first-child+html .class{}/* for IE7 */
HTML头部引用:针对所有IE:<![endif]-->这类hack不仅仅对CSS有效还对判断句里的所有代码都生效。
3、列举几种 浏览器兼容问题
display:inline-block;
对块级元素设置这个属性的时候,IE67是不支持的,需要如下语句:
*display:inline;
*zoom:1;
opacity:0.8;常用CSS3属性调节透明度,这个不被IE8以下支持。所以需要:
filter: "alpha(opacity=60)"; /* IE 8 /
filter: alpha(opacity=60); / IE 4-7 */
zoom: 1;
<min-height>在IE7以下不兼容,需要给其固定宽度。
Box-sizing在IE67不支持。
4、针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
一般来讲,如果有超过一定百分比的人数使用某个浏览器,我们在设计页面时候就要考虑到此浏览器的兼容问题。主要就是IE678,火狐和谷歌浏览器。先尽量写代码,如果月到一些问题可以用审查工具去看具体哪有问题,配合CANIUSE的网站查询兼容情况,再酌情进行修改。
渐进增强:是指在渲染的时候先以低版本的基础页面为主,保证基本功能,之后再针对高版本浏览器中的功能属性渲染,改进等。
优雅降级:与上者刚好相反,是指直接渲染网站所有功能,再对低版本的浏览器进行兼容。
5、reset.css和normalize.css分别是做什么的?为什么推荐使用nomalize.css?
reset.css:是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。
normalize.css:它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。
nomalize.css的优势:
- Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。 - Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。 - Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链,如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。 - Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。 - Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
6、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用?
IE盒模型的宽度是:
宽度(width)=边框(border)+内边距(padding)+内容宽度(content)
标准盒模型的宽度是:实际内容的宽度。
IE678下使用标准盒模型在文档声明里写上<doctype>即可。
这是一个CSS3属性<box-sizing:border-box>的作用是固定盒模型的宽度,使得padding无法将盒模型撑开,也是就使用IE盒模型。