浏览器兼容
如何调试 IE 浏览器
-
IE7以上自带调试工具
- IE6以下使用
border: 1px solid red;通过border便捷查看 -
IEtester
- 安装虚拟机，安装不同版本IE进行调试
- netrenderer也可以在线模拟IE浏览器系列来打开网页，不过经过测试，它其实也只是返回检测网页的第一屏截图而已，肯定比不上IETester直观和实用。http://netrenderer.com
-
http://browsershots.org
这个工具非常强悍，它能够模拟100多款不同的浏览器访问网页，然后返回网页的截图。我们可以从返回的网页截图看网页的显示是否达到预期，从而进行修改调试。
什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
-
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
-
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
-
属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.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)：例如 IE6能识别
html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{} -
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
<script>alert(1);</script>
列举几种 浏览器兼容问题
- IE6、IE7不识别inline-block但行内可以触发块元素。其它主流浏览器均支持inline-block。
- 方法1：inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
- 方法2：直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：
.layout { display:inline-block;
*display:inline;
*zoom:1;
}
-
标签设置min-height不兼容
解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}
备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时，容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时我们就会面临这个兼容性问题。 -
opacity是用来设定元素透明度的， 是CSS 3里的一个属性，IE8以下不支持，包括一些老版本的浏览器也不支持。
.opacity{ filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/ }
- 各浏览器默认margin与padding不同
*{
margin:0;
padding:0;
}
针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
-
需要针对自身的项目进行调研，若某浏览器所占比例大于一定百分比（如5%）才会考虑该浏览的兼容。
-
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
-
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
- Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
- Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
- normalize.css优点
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来
IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
- W3C标准中padding、border所占的空间不在width、height范围内，
- 俗称的IE的盒模型width包括content尺寸＋padding＋border
- 早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用 标准盒模型IE8及以上版本使用标准盒模型
-
没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”
-
box-sizing:border-box使得所有盒模型均按照IE盒子模型处理。即为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。(为CSS3属性，IE8以上才支持，包括IE8)
virtualbox 安装 xp 虚拟机
在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别
- 盒模型（IE678均一样）(设置
font-size:0或line-height:0均可解决此BUG)
IE678均一样
-
inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.inline-block{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: green;
}
</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完全支持inline-block
IE8
IE6、7块级元素不支持inline-block,行内元素支持
IE7
IE6
-
max-width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task13</title>
<style>
.box1 {
max-width: 100px;
height: 100px;
border: 5px solid;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。这是一段测试。</div></body> </html>
IE8支持
IE8
IE7支持
IE7
IE6不支持
