一、如何调试 IE 浏览器
- IE7以上版本自带的开发者工具,IE6可以用border的方法;
例:IE11的开发者工具
- 采用模拟器的方式去模拟不同版本下的IE浏览器,如ietester;
例:ietester
- 通过安装虚拟机的方式,安装不同版本的IE运行环境去达到调试IE浏览器的目的。
例:用虚拟机安装不同版本浏览器
高版本IE浏览器的开发者工具很不错,可以选择不同版本模式进行调试;ietester可以创建不同版本的浏览器,但感觉不是很好用;个人还是比较喜欢用虚拟机安装不同版本浏览器的方式,感觉更真实。
二、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
-
什么是CSS hack
由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox,Safari,Opera,Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
-
CSS hack的原理
由于不同浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
-
在 CSS 和 HTML里如何写 hack
CSS hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
-
属性前缀法(即内部Hack):
在CSS样式属性名前加上只有特定浏览器在能识别的hack前缀,以达到预期的页面展现效果。
.container{ _color: red;/*IE6识别*/ *color: red;/*IE6,IE7识别*/ color: red\9;/*IE6-IE10识别*/ color: red\0;/*IE8-IE10识别*/ color: red\9\0;/*IE9,IE10识别*/ }
-
选择器前缀法(即选择器hack):
针对一些页面不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*html{}/*只对IE6生效*/ *+html{}/*只对IE7生效*/
-
IE条件注释法(即HTML条件注释hack):(注:IE10+已经不再支持条件注释)这类hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
只在IE下生效
<!--[if IE]> 这段文字只在IE浏览器显示 <![endif]>
只在IE6下生效
<!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
只在IE6以下版本生效
<!--[if lte IE 6]> 这段文字只在IE6以下(包括)版本IE浏览器显示 <![endif]-->
只在IE8上不生效
<!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
非IE浏览器生效
<!--[if ! IE]> 这段文字只在非IE浏览器显示 <![endif]-->
-
-
在 CSS 中 ie6、ie7的 hack 方式
- IE6
-
属性前缀法:
.box{ _color: red;/*for IE6*/ }
-
选择器前缀法:
*body{}/*for IE6*/
-
条件注释法:
<head> <!--[if IE 6]> <body class="ie6"> <![endif]--> </head>
-
- IE7
-
选择器前缀法:
*+body{}/*for IE7*/
-
条件注释法:
<head> <!--[if IE 7]> <body class="ie7"> <![endif]--> </head>
-
- IE6~IE7
-
属性前缀法:
.box{ *color: red;/*for IE6~7*/ }
-
选择器前缀法:
@media screen\9{...}
-
条件注释法:
<head> <!--[if lte IE 7]> <body class="ie6 ie7"> <![endif]--> </head>
-
- IE6
参考:
史上最全的CSS hack方式一览
Browserhacks
三、列举几种浏览器兼容问题
-
不同浏览器的默认标签的margin和padding不同
解决办法:*{margin: 0; padding: 0;}
备注:这是最常见的也是最易解决的一个浏览器兼容性问题。
-
块级元素设置float后,又有左右margin的情况下,IE6显示的margin比设置的大
解决办法:在float的标签样式中加入display: inline;
将其转化为行内元素
备注:我们最常用的就是div+css布局了,而div就是一个典型的块级元素,横向布局时我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。 -
设置较小高度的标签(一般小于10px),在IE6、IE7中高度超出自己设置的高度
解决办法:给超出高度的标签设置overflow: hidden;
或者设置行高line-height
小于设置的高度
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。 -
行内元素,设置
display: block;
后采用float布局,又有左右margin的情况,IE6显示的margin比设置的大
解决办法:在display: block;
后面加入display: inline; display: table;
备注:行内元素,为了设置宽高,我们需要设置display: block;
(除了input标签比较特殊)。在float布局并有横向的margin后,在IE6下,它就具有了块级元素float后的横向margin的bug。不过因为它本身就是行内元素,所以我们再加上display: inline;
的话,它的高度就不可设了。这时候我们还需要在display: inline;
后面加入display: table;
-
图片默认有间距:几个img标签放在一起时,有些浏览器会有默认的间距,加了
margin:0; padding:0;
也不起作用
解决办法:使用float属性为img布局
备注:因为img标签是行内标签,所以只要不超出容器宽度,img标签都会排在一行,但是部分浏览器的img标签之间会个间距。 -
标签设置min-height不兼容
解决办法:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto!important; height:200px; overflow:visible;}
备注:在B/S系统前端开发时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时,容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时我们就会面临这个兼容性问题。 -
透明度的问题
解决办法:selector{ filter: alpha(opacity=50);/*for IE*/ -moz-opacity: 0.5;/*for old versions of the Mozilla browsers*/ -khtml-opacity: 0.5; /* for old versions of Safari*/ opacity: 0.5; }
四、针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
- 对兼容、多浏览器覆盖的看法:
首先要针对项目本身进行调研,查看目标人群使用的浏览器情况,一般情况对于使用人群小于5%的就可以忽略了,因为所谓的兼容和覆盖全部浏览器这本身就是不现实的,而且涉及到时间和成本的问题,还有一些暂时无法解决的兼容性bug等,这些都需要综合考虑。 - 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
- 优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
参考
知乎:怎样可以很好地保证网页的浏览器兼容性
五、reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?
-
reset.css是通过重新定义标签样式,把浏览器的默认样式覆盖掉,以便保持个浏览器渲染的一致性。相对暴力
normalize.css是reset.css的替代方案,保留有用的浏览器默认样式,重置掉该重置的样式,同时进行一些bug的修复。相对平和引用知乎上的回答:
CSS Reset是革命党,CSS Reset里最激进那一派提倡不管你小子有没有用,通通给我脱了那身衣服,凭什么你body出生就穿一圈margin,凭什么你姓h的比别人吃得胖,凭什么你ul戴一胳膊珠子。于是
*{margin:0;}
等等运动,全把人家拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家过都扔炉子里烧了,自己看着办吧。
Normalize.css是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们指定个规范,确保他们在任何浏览器里都干好自己的活儿。
知乎: Normalize.css 与传统的 CSS Reset 有哪些区别
- Normalize vs Reset
- 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中有进一步说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。
- Normalize.css保护了有价值的默认值
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
- IE盒模型和标准盒模型的区别
IE盒模型:宽度(width)=边框(border)+内边距(padding)+内容宽度(content)
标准盒模型:宽度(width)=内容宽度(content)
- 怎样使IE678使用标准盒模型
IE不添加doctype
时(怪异模式)使用的是IE盒模型,要想使IE678使用标准盒模型,给IE678添加doctype
即可。 -
box-sizing: border-box;
是CSS3新增属性,设置此属性之后,相当于以怪异模式解析。
通常一个块级元素实际所占宽高度=外边距(margin
)+边框(border
)+内边距(padding
)+宽/高度(width/height
)
如果设置了box-sizing: border-box;
,实际所占宽高度=宽高度(width/height
)+外边距(margin
)
如图所示:
操作
1. virtualbox 安装 xp 虚拟机
5.png用Virtualbox虚拟机安装Windows XP/7、Win7系统详细图文教程
网上下载的很多XP系统都是默认的IE8浏览器,而且没法卸载,安装纯净版的XP系统就可以很方便的卸载IE8还原到IE6。
系统之家 GHOST XP SP3 纯净版 V2014.12
虚拟机与主机共享粘贴板、拖放,还需安装增强工具包
如何为VirtualBox安装 Guest Additions/增强工具包/功能增强包/增强功能包
2. IE盒模型
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>盒模型</title>
<style>
.box{
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<html>
6.png
下面通过设置固定宽高,改变marging
、padding
、border
来展示IE盒模型:
3. inline-block
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>inline-block</title>
<style>
.inline-block{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="inline-block"></div>
<div class="inline-block"></div>
<a class="inline-block" href=""></a>
<a class="inline-block" href=""></a>
</body>
<html>
- IE8
IE8支持inline-block
但是IE8兼容性视图中,对块级元素设置`inline-block`不起作用,如图所示:
12.png
- IE7
IE7也是块级元素不支持inline-block
,行内元素支持,如图:
- IE6
IE6也是块级元素不支持inline-block
,行内元素支持
4. max-width
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>max-width</title>
<style>
.block{
display: block;
max-width: 100px;
max-height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
.inline-block{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="block">
</div>
<div class="inline-block">max</div>
<a class="block" href="">max</a>
<a class="inline-block" href="">max</a>
</body>
<html>
- IE8
IE8中块级元素不支持max-width
,浏览器自动将max-width
解析为width
。设置了inline-block
的元素支持max-width
- IE7
IE7中块级元素不支持max-width
,浏览器自动将max-width
解析为width
。设置了inline-block
的行内元素支持max-width
- IE6
IE6中块级元素不支持max-width
,浏览器并未将max-width
解析为width
。设置了inline-block
的行内元素支持max-width
本文版权属吴天乔所有,转载务必注明出处。
网友评论