1 .如何调试 IE 浏览器.
- IE7以上可以使用浏览器自带的开发者工具,IE6可以使用加边框的直观方式进行调试;
- 使用模拟器模拟不同版本的IE浏览器,如IEtester或者Test IE、Edge自带模拟器等;
- 安装虚拟机,在虚拟机内安装多个系统搭配不同版本IE浏览器来进行调试;
2.什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
- 针对不同厂商浏览器或者同一浏览器不同版本之中的bug,写的一些非常规的样式来达到想要表现的效果的过程叫css hack。
CSS Hack大致有3种表现形式:CSS属性前缀法、选择器前缀法、IE条件注释法(即HTML头部引用if IE)
Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
-
属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
background:black; /* for all browsers */ _background:red; /* for ie6*/ *background:green; /* for ie6~7 */ background:blue\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 */
-
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
只在IE下生效
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
<link rel="stylesheet"type="text/css"href="ie6.css">
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]> 这段文字只在非IE浏览器显示
<![endif]-->```
----
3.列举几种 浏览器兼容问题.
* ` display:inline-block;/*IE8以下不支持*/`
方法:添加`display:inline`尽可能正常展示页面功能
* `opacity:0.4;/*IE8部分支持,IE8以下不支持*/`
方法:添加`filter:alpha(opacity=50);`设置
[【CSS】最全的CSS浏览器兼容问题](https://www.douban.com/group/topic/4629864/)
----
4.针对兼容、多浏览器覆盖有什么看法?**渐进增强**和**优雅降级**是什么意思?
* 分析需求,对于上级或客户需求兼容的低版本浏览器需全部兼容;
* 对于低版本只要大局显示不影响,功能能实现,可以不刻意追求美观上样式的一致;
* 分析浏览器占用率,一般低于一定占用率的浏览器可以选择不兼容;
①. **渐进增强:**
* 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能;
* 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript,而总是提供一种候补方法,确保用户可以访问(主要的)内容;
* 使用渐进增强时,无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先,只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容,然后再以无侵入(unobtrusive)的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时,它们会自动地呈现出来并发挥作用;
②. **优雅降级:**
* 一开始就构建站点的完整功能,然后针对浏览器测试和修复;
* 使用优雅降级方案,Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了;
* 使用优雅降级技术时,你必须首先完整的实现了网站,其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效;
----
5.`reset.css`和normalize.css分别是做什么的?为什么推荐使用` nomalize.css`?
**Reset.css: **统一各个版本浏览器默认Html标签样式,直接重置所有原浏览器默认样式,再添加统一的标准默认样式;
**normalize.css:**统一各个版本浏览器默认Html标签样式,只重置统一浏览器默认样式中有差异的部分样式;
推荐使用Normalize的好处:
* Normalize.css 保护了有价值的默认值;
* Normalize.css 修复了浏览器的bug
* Normalize.css 不会让你的调试工具变的杂乱;
* Normalize.css 是模块化的;
* Normalize.css 拥有详细的文档。
[Normalize.Css介绍和使用,Normalize与CSS Reset的区别](http://www.yxxme.com/1034.html)
----
6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?`box-sizing:border-box`有什么作用?
![IE盒子](https://img.haomeiwen.com/i1043191/edad806a8791b5e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![标准盒模型](https://img.haomeiwen.com/i1043191/28f38945d9983944.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***使用IE6、7、8使用标准盒模型:***
* 添加声明`<!DOCTYPE html>
`
***box-sizing:border-box作用:***
* 为元素设定的宽度和高度决定了元素的边框盒。即使盒子模型设定为IE盒模型,设定宽高包含内边距和边框和内容宽度;
----
本文版权归作者饥人谷_Josh和饥人谷所有,转载请注明来源
----
网友评论