标签：
导航一般可以用UL来做
======================================================
CS3圆角不兼容IE8和以下的浏览器。只能用背景图来写兼容。
=========================================================
hack 写骇客的时候要注意顺序。正常文档流的阅读是前到后的
IE6: _background:green
IE7(IE6): *background:red;
IE8:background: \9 有空格
IE8(IE9):background:\9 无空格
兼容所有IE是\0后缀的
IE8:background:yellow \0 有空格
IE8(IE9):background:black\0 无空格
条件注释：(只有png格式的调用给IE6看，可以用条件注释)
<!--[if IE6]>IE6能看到<![endif]--> 只有IE6能看到
<!--[if IE7]>IE7能看到<![endif]--> 只有IE7能看到
注意:IE10 不支持条件注释
IE6-IE9才有条件注释。
<!--[!IE]>-->
非IE下
<!--<![endif]-->
==================================================================
js的引用 注意.png是className 或者用*代替
<!--[if IE6]>
<script src="sssss.js"></script>
<script>
ssss.fix(‘.png‘);
</script>
<![endif]-->
=====================================================================
IE6 常见BUG
1> 双边距BUG IE6下最著名的(必须记住)（IE6独有）
解决：_display:inline
2> li 的BUG 高度增加3像素 （IE6下独有的BUG）重点儿必须记住
li里面子级浮动了，在IE6下会有空隙出现（IE6下独有的BUG）3像素Bug
解决：1.让li也浮动起来 _float:left
如果此时li变成了台阶形状的 则给li width:100% li还站着一行同时也没有3像素了
2.给li加vertical：top
3> IE6下最小高度:(必须记住)
bug产生原因
IE6 下一个div有宽度，高度最小不是0而是12px
解决方法：
给 div height:0; 并且 _overflow:hidden;
或者是 height:4px _overflow:hidden ;(这样就可以在IE6下设置任意高度了，因为IE6 下最小高度是12px;)
10> a包着img的时候会有空隙同时img还有蓝色的border 就变块儿 所有浏览器都有
别的标签包着img 也会有空隙
让a变成行内块。display:inline-block同时要给给img 加 display:block
如果a不变成块儿的话是不能包块儿的。此时img 已经变成块儿了
img{border:0 none}
5>IE6不支持子级的margin负值
给子级加上position:relative;没有脱离文档流。但是层级还高了。哈哈哈
15>png在IE6下不支持。 必须记住(IE6独有)
解决 1.
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
// DD_belatedPNG.fix(‘*‘);
// DD_belatedPNG.fix(‘#img1‘);
// DD_belatedPNG.fix(‘#img1, #img2, #img3‘);
DD_belatedPNG.fix(‘.png‘);
</script>
<![endif]-->
<img src="images/logo.png" class="png" />
9> select 在IE6下是最高级别的显示，比important还要高（必须记住 IE6特有）
解决：1 自己模拟一个select。
2 用flash 遮盖住select flash的级别更高；
4> 子级撑开父级(会用到定位，这种BUG一般遇到比较少)
解决：给父级加overflow:hidden;
6>IE6下line-height失效：
产生原因：
行内元素与行内块元素在同一行中，行内元素的line-height失效
解决方法：1.即避开行高 使用另外的方式来代替
input 加 margin-top 等于 (父级高度-input高度)/2
2. 用浮动 然后再用margin撑开距离
7> 注释最好不要写在浮动标签里面 就在父级也注释就好了
原因：
IE6 下 两个浮动元素，宽度都是width:100%
在浮动元素间加注释就会多出几个字
解决：
1. 删除注释。但不彻底，浮动元素多了还是会出问题
2. 推荐：给浮动元素加_background:none;
8>
IE6下不支持最小宽
解决方法：
利用 IE6 子级能撑开父级的bug，给 IE6 加 _width:200px;
white-space:nowrap;（不换行的意思）这样内容就可以撑开父级
11> opacity 宽高自适应的时候 IE6下不认
解决：给IE6单独写 _hiehgt:99999px ;_overflow:hidden;
12> IE6 下，定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失
解决方法：
记着浮动的三要素，同级都得浮动就可以解决
在定位元素与浮动元素之间放一个块空标签即可解决。
13> 行内元素 paddin margin 都不支持上下 只支持左右。
14> haslayout 低版本下的渲染模式。zoom:1 可以触发
ul+li+a 做导航的时候;宽度不能设死。只能用padding撑开的时候 加一个zoom:1;就可以了
15> IE6 下，定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失
解决方法：
在定位元素与浮动元素之间放一个块标签即可解决。
16>
=======================================================================================
标签：
原文地址：http://www.cnblogs.com/dfish/p/4176576.html
