一、ie6最小盒子问题
第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。
height: 4px; _font-size: 0px;
我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性
二、清除浮动的方法
IE6不支持用overflow:hidden;来清除浮动的
解决办法，以毒攻毒。追加一条
完整写法：
overflow: hidden; _zoom:1;
三、关于margin的IE6兼容问题（双边距）
IE6双倍margin bug
问题：当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。
1 <ul> 2 <li></li> 3 <li></li> 4 <li></li> 5 </ul>
11.png
解决方案：
1.使浮动的方向和margin的方向，相反。所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
float: left; margin-right: 40px;
2.使用hack（没必要，别惯着这个IE6）单独给队首的元素，写一个一半的margin
` <li class="no1"></li>
ul li.no1{
_margin-left:20px;3 }
`
四、IE6的3px bug
2.png
解决办法：
不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准(给父亲padding代替儿子margin)
五、font属性
网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中
英语：Arial 、 Times New Roman
需要其他的字体，那么需要切图。
为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体";
备选字体可以有无数个，用逗号隔开。
我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。
六、a链接的伪类样式
伪类
也就是说，同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。
类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。
伪类用冒号来表示。
a标签有4种伪类，要求背诵
:link 表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。 :visited 表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。 :hover 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。 :active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。
33.png
记住，这四种状态，在css中，必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。
记住，所有的a在设置了text/font后就不继承text、font这些东西。因为a自己有一个伪类的权重。
最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容(原因是给a设置了颜色字体大小等，link和visited就显示了默认的a的样式)。所以这些“老油条”们，就把a标签简化了
a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。 1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 50px; 5 text-decoration: none; 6 background-color: purple; 7 color:white; 8 } 9 .nav ul li a:hover{ 10 background-color: orange; 11 } 12 .nav ul li a:visited{ 13 color:red; 14 }
七 IE56 中盒子模型的问题
问题：在IE56 中盒子模型的宽度（width）的计算是：border+padding+contentWidth的。与box-sizing:border-box类似。
而其他浏览器盒子模型默认是：content-box(也就是说你给一个盒子width是指的是内容的宽，盒子实际的宽是width+padding+border)
上下外边距合并问题
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
只有标准文档流中块框的垂直外边距才会发生外边距合并。行内元素、浮动元素或行内块元素或绝对定位之间的外边距不会合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
CSS 外边距合并实例 1
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
CSS 外边距合并实例 2
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
CSS 外边距合并实例 3
8.IE5中margin:0 auto;失效
在IE5中对块元素存在一个外边距处理BUG。块元素有时会被视作行内元素。所以margin：0 auto;失效。
兼容ie5的做法：
要居中的元素设置margin:0 auto;
在元素的父元素或者给该居中元素包裹一层div，给这个div或者父元素设置：text-align:center;
IE678不支持opacity属性
兼容方法：
opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */
orient/strip%7CimageView2/2/w/1240)
网友评论