## 兼容性问题一
### display:inline-block兼容问题
主要针对块级元素,行类元素无兼容问题
兼容性：
IE6、IE7不识别inline-block但可以触发块元素。
其它主流浏览器均支持inline-block。
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈 现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：
display:inline-block;
*display:inline;
*zoom:1;
## 兼容性问题二
### 兼容border
现象:具体的问题是这样子的：当父元素设置了padding属性后（即便属性值为0），该元素处在:hover状态时， 元素底部边框无法显示，当设置outline属性后，边框宽度的第一个像素无法显示（看起来就像跟底部的outline互相抵消了）
<style>
body {
padding: 50px;
}
span a {
text-decoration: none;
font-size: 500%;
outline: 1px solid black;
}
#test2 a {
text-decoration: none;
font-size: 500%;
}
#test2 a:hover, span a:hover {
border-bottom: 1px solid black;
}
/*第一个链接元素设置了outline值
，当它处在:hover状态时，在IE8中看起来底部的outline不见了
。对于第二个链接元素，:hover状态下底部边框不见了。如果把边框值设置大一点
（比如说设置为5px），对于第二个链接，底部边框仍然无法显示，对于第一个链接元素，
底部边框实际值要比属性值小1px（即4px）。
经过测试，不只是border-bottom会有这个bug，border-top也会有边框消失的bug。*/
</style>
</head>
<body>
<div id="test"><span><a href="#">Hover over this</a></span></div>
<div id="test2" style="margin-top: 20px"><a href="#">Hover over this</a></div>
</body>
</html>
解决方式： 修复bug的绝招就是对 a:hover { }设置{position: relative;}。注意：如果对非: hover状态设置{position: relative}（比如说这样子: a { position: relative; }） ，那么这个bug将依然存在
#test2 a:hover, span a:hover {
/*border-top:1px solid red;*/
border-bottom: 1px solid black;
position: relative;
}
## 兼容性问题三
1.ul标签在FF中默认只有padding值(即：padding-left:40px),而在IE中只默认有margin值（即：margin-left:40px）,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。
2.一般都在总样式规定一下：
body,div,dl,dt,dd,ul
,ol,li,h1,h2,h3,h4,h5
,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td,img {
padding:0;margin:0;
}
代码：
<style>
.d1{
width:400px;
height:200px;
}
.d1 li{
float:left;
}
/*.d1 ul{
margin:0;
padding:0;
}*/
</style>
<div class="d1">
<ul>
<li>efref</li>
<li>erf</li>
<li>sfsfs</li>
</ul>
</div>
## 兼容性问题四
现象：
在一个div里面嵌入另一个div，给内部的div设置margin为负数，
结果在IE6里面会将超出边界的内容直接隐藏，其他浏览器则显示正常。
代码：
<style>
.abc{
width: 200px;
height: 30px;
margin:100px auto;
border: 1px solid #ffffff;
}
.aa{
width: 100px;
height: 20px;
border: 1px solid red;
/*问题描述
IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常。
造成的影响
严重的情况下会破坏整体布局。*/
margin: -10px;
}
</style>
</head>
<body>
<div class="abc">
<div class="aa">123456789</div>
</div>
解决方法：
在子元素内部设置：
*zoom:1;
*position: relative;
如下所示：
.aa{
/*首先需要保证容器在IE中触发 hasLayout 属性，可以通过zoom:1实现。*/
*zoom:1;
*position: relative;
}
## 兼容性问题五
**去除链接虚线边框的问题**
当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框
**解决：**
ie6/7中 设置为：
a { blr:expression(this.onFocus=this.blur()) }
注意：ie8 和 ff 都不支持expression
在ie8 、ff中设置为 :focus { outline: none; }
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a {
blr:expression(this.onFocus=this.blur());
}
a:focus { outline: none; }
</style>
</head>
<body>
<a>测试数据</a>
</body>
</html>
## 兼容性问题六
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
//添加以下内容解决
p{
margin: 0;
}
</style>
</head>
<body>
<div class="hear">
<p>aadadaa</p>
</div>
</body>
</html>
## 兼容性问题七
###ie6下元素浮动可能会导致垂直margin不会重叠####
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#DIV1{
margin-bottom:50px;
}
#Float{
float:left;
width:100%;
}
#DIV2{
margin-top: 50px;
}
</style>
</head>
<body>
<div style="border:3px solid black; width:300px;">
<div id="DIV1">above</div>
<div id="Float">Float</div>
<div id="DIV2">below</div>
</div>
</body>
</html>
在现代浏览器和ie8+下，中间元素浮动脱离文档流，div1和div2在文档流中，垂直的上下margin会重叠，显示为正常的50px；在ie6上，中间浮动的元素由于跟父元素一样宽，会把上下元素分隔开，导致中间浮动的元素与上下元素分别有50px的margin，解决方法是在div2元素里面使用css hank技术解决，即：
#DIV2{
margin-top: 50px;
_margin-top: -50px;
}
在ie7下可能会有问题，所有把ie7加上，即：
#DIV2{
margin-top: 50px;
*margin-top: 0;
_margin-top: -50px;
}
加上以上代码即可解决当浮动元素有足够的宽度时会使垂直margin的重叠失效问题。
## 兼容性问题八
###IE6中浮动元素时绝对定位元素消失的情况 ####
代码如下：
<div class="father">
<div class="child1">我在定位</div>
<div class="child2">我在浮动</div>
</div>
<style>
.father{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child1{
top:0;
left: 0;
position: absolute;
width: 100px;
height: 100px;
}
.child2{
float: left;
width: 200px;
height: 100px;
_display:inline;
}
</style>
在父级元素中存在一个定位元素和一个浮动元素时，当浮动元素的width大于父元素的width-3时，定位元素就会消失。
解决方法：
1.在定位 元素外面套一个div;
2.在定位元素和浮动 元素之间加一个空的div。
## 兼容性问题九
1.
随机写几个标签，不加样式控制的情况下，各自的margin和padding差异很大； 在css里。
方案：css文件开头都用配符*开头设置；各个标签内外补丁。
2.
默认的图片有间距，几个img标签放在一起的时候，默认有间距，即使加上通配符也不起作用，
方案：使用float属性布局，img标签是行内元素，使用浮动会排成一行，只要不超出高度
//call，apply 继承
//用instanceof 验证一个对象是否真的继承，为true,或falus; call，apply为falus,原型链为trus;
//call,apply 当第一个参数作用不传参数时，指window对象；第二个值传参，则指向参数;
//call 第二个值用逗号分隔，apply只接收数组
// this用法
// 1、直接用方法调用this，所有的this指window对象；
// 2、产生对象方法，指前当前对象；
// 3、当对象方法还有内部函数时，this将重新指向window对象; 如
//原型链继承方法；
//将student的原型设置为prople对象;
Student.prototype=new People();
//studnt原型的构造方法还原成stdent；
Student.prototype.constructor=Student;