浏览器兼容性

 HTML 5
浏览器兼容性:
浏览器两种内核:渲染内核,用于布局
<p>js引擎;</p>
css reset技术:
<p>最简单的:
<br>*{
margin:0;
padding:0;
}
</p>
normalize.css技术:是在css.reset基础上的改进
<p>css优先级:内嵌>(内联,外联),内联,外联谁在前谁优先</p>
<p>!important>id>类>元素</p>
<p>复合选择器优先级:</p>
<p>权重值 a, b, c, d</p>
<p> &nbsp;内嵌 &nbsp;&nbsp;&nbsp;1&nbsp; 0 &nbsp;0 &nbsp;0</p>
<p> &nbsp;id&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;0&nbsp; 1 &nbsp;0 &nbsp;0</p>
<p> &nbsp;类&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;0&nbsp; 0 &nbsp;1 &nbsp;0</p>
<p> &nbsp;元素&nbsp; &nbsp; &nbsp;0&nbsp; 0 &nbsp;0 &nbsp;1</p>
<p>!important权重值最高;*没有权重值</p>
解决通用兼容性问题:
<p>css兼容性问题:</p>
1,css hack 技术:打补丁,浏览器解析css样式时的技术;
<p>{
background:red; /*Google为红色*/
*background:green; /*IE7为黄色*/
backgroun:blue; /*IE8为蓝色*/
_background:yellow; /*IE6为绿色*/
}</p>

条件注释解决兼容性问题;
<!--[if IE 6]>
<script>
alert("this is IE6");
</script>
<![endif]-->
<p>Ite:小于等于;gte:大于等于;</p>
IE6双倍margin:设置_display:inline;对其它浏览器没有影响,
IE6高度只能大于10px,设置小于10px方法:_overflow:hidden;
子元素绑架父元素;
<P>IE6,7不存在这个问题,可加overflow:hidden</p>
<P>所有浏览器float都会让高度塌陷,除IE6外可设置overflow:hidden;</p>
<P>每个标签都有haslayout(是否为布局标签)属性:只有true和false两个值;可用zoom: 触发haslayout;</p>
<P>如果触发浏览器BFC,就要加haslayout解决IE兼容性问题</p>
图片默认有间距:float:left;
标签最低高度设置 min-height不兼容,IE不支持min-height;
{
min-height:500px;
_height:500px;
}
或者
{
height:auto !important;
height:500px;
min-height:500px;
}
<P>min-IE6没有出现滚动条;解决方法如下:</p>

{
_expression(documentElement.clientWidth>500?"500px":"auto");
min-500px;
}
<P>css表达式后可加js代码,可在IE6中使用;</p>