Ba la la la ~ 读者朋友，你们好啊，又到了冷锋时间，话不多说，发车！
1.<!DOCTYPE HTML>文档类型的声明。
产生条件：
IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；
解决办法：书写文档声明。
2.不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。
产生条件：不同浏览器；
解决办法：利用CSS reset文件进行样式的清除，然后再根据需要进行设置。
html{font-family:"微软雅黑",Arial,sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}a{text-decoration:none;color:#000;outline:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{*font-size:100%}a{-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}
为防止不同浏览器默认样式对于网页布局样式造成的影响，通常我们在
HTML文件的头部引入上面这段重置代码，将一些浏览器所不同的样式以及部分标签的默认样式清除掉。
3.横向双倍外边距
产生条件：在
IE6中块元素浮动后，会出现横向双倍
margin现象。
解决办法：
在float标签的样式控制中加入display：inline
IE6存在不少的兼容问题，今天要说的是IE6 的 横向双倍外边距
横向双倍外边距的触发条件：
当浮动元素的浮动方向和浮动边界的方向一致。此时用
IE6查看网页，就会发现，设置的横向的边距变成了双倍。
如：元素向左浮动并且设置了左侧的外边距出现了这样的双边距
bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。
那么，如何修正这个
IE6下的横向双倍外边距的Bug呢？
只需要给浮动元素加上
display:inline;的CSS属性就可以了。
4.默认行高
产生条件：
IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
解决办法：给超出高度的标签设置
overflow：hidden；或者将文字的行高line-height设置为小于块的高度。
5.img外部的border
产生条件：
img外部有a标签，即img标签有链接时
解决办法：设置
img边框border:0;
**6.图片默认有间距。
产生条件：
img标签（每个img之后敲了回车）
解决办法：为
img设置float的浮动布局方式。
7.经典3像素bug
产生条件：
IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
解决办法：设置非浮动元素浮动。
8.默认行高
产生条件：清除浮动的时候，有些人会采取一种
清浮动的方法**，使用一个空的
div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。
解决办法：设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}
选择清浮动位置时应注意以下：
1、清浮动一定要在浮动标签完成浮动布局以后添加，否则会影响到浮动标签布局；
2、清除浮动必须与前面的标签属于同级关系。
①clear属性定义了元素某个方向上不允许出现浮动元素：
none
（允许两边都可以有浮动对象）
/left（…）/right（不允许右边有浮动对象）/both（不允许有浮动对象）;
②空标签清除浮动：在HTML页面中加入一个空标签用来清除浮动。
HTML：
<div class="clear"> </div>
CSS:.clear{clear:both;hegiht:0;overflow:hidden;}
clear:both;是清除所有浮动；
height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。
但是空标签清浮动会增加多余的代码。
③overflow：在需要清除浮动的腹肌标签中加入overflow即可，在IE6中不认识此属性则加入zoom：1;或者height：1%;css样式改为：.out{overflow:auto;zoom:1;}
该属性对于父标签设置的高度小于子标签时，IE6/7、遨游则以下拉框形式出现，而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。
overflow:visible属性只能对IE6/7、遨游起作用，对火狐、谷歌、欧鹏、IE8无清浮作用。
overflow:visible(不剪切内容也不添加滚动条)/auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）/hidden（超出部分隐藏）/scroll（总是显示滚动条）;
④after清浮动：
css样式为：
.out{zoom:1;}/==for IE6/7 Maxthon2==/
outer:after {clear:both;content:"";visible:hidden;display:block;}/==for FF/chrome/opera/IE8==/
其中
clear:both;只清除所有浮动；content:"";display:block;对于FF/chrome/opera/IE8不能缺少，content（）可以取空值。
⑤子标签浮动时，给父标签浮动
⑥下一标签直接清浮动：兄弟标签浮动时，下一标签直接写入清除clear：both；就可以。
⑦使用position：absolute；清除浮动。
9.a标签hover不适用于所有标签
产生条件：
IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
解决办法：合理用
a标签嵌套其他行内标签或者用javascript模拟a的hover效果；详情请查看日志：兼容IE6 a标签hover效果**
10.table标签当中border-color属性设置无效
产生条件：
IE6中table设置属性border-color无效；
解决办法：运用
CSS样式进行控制，而不是使用属性进行样式的处理。
11.png格式图片
产生条件：
IE6浏览器，不支持透明；
解决办法：使用
javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。
12.透明rgba与opacity
产生条件：
IE6****,7,8****不支持此两种透明的设置方法；
解决办法：使用
IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
以上为个人意见，如有雷同，纯属巧合，欢迎大家多提意见！Bey 了 个 Bey ~
网友评论