对目前所遇见的兼容性笔记进行整理分类:
| 不兼容浏览器 | 问题概要 | 问题描述 | 解决方法 |
| IE6，IE7 | 3px | 并列一行的元素左侧第一个元素没浮动，第二个元素左浮动， 则两个元素之间会多3像素空隙 | 并在一行的元素如果有一个元素有浮动，则都加浮动 |
| IE6，IE7 | 下折行 | 并列一行的元素左侧元素没浮动，右侧元素右浮动，则右侧浮动元素向下折行 | 并在一行的元素如果有一个元素有浮动，则都加浮动 |
| IE6 | 双边距 | 块属性标签浮动，并且有横向margin值，横向margin加倍 | 块元素添加display：inline |
| IE6，IE7 | li | li无浮动,li内部元素有浮动,li下会多出来3px左右的间隙 | 给li添加vertical-align:top 或给li添加浮动 |
| IE6 | 最小高度 | 最小高度不小于19px | 设置 overflow:hidden得到高度为设置的height |
| IE6 | 最小高度+li | 当最小高度问题和 li 的间隙问题共存的时候 | 只能给li添加浮动，且添加overflow：hidden |
| IE6，IE7 | 图片间隙 | 图片下有间隙 | 给图片添加vertical-align |
| IE6 | margin消失 | 当一行子元素占有的宽度之和，和父级的宽度相差超过3px，或者有不满行状态的时候，最后一行子元素的下margin在IE6下就会失效 | 尽量避免该情况 |
| IE6 | 文字溢出 | 子元素的宽度和父级的宽度相差小于3px的时候，两个浮动元素中间有注释或者内嵌元素文字莫名其妙多出几个 | 用div把注释或者内嵌元素包起来 |
| IE6 | 浮动与绝对定位 | 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失 | 把绝对定位元素套个div,或在添加zoom:1;触发layout |
| IE6 | Fiexd | 不支持固定定位 position：fiexd； | 需要配合JS计算滚动尺寸实现兼容 |
| IE6 | 溢出 | 父级的 overflow:hidden; 包不住子级的relative; | 给父级也添加relative |
| IE6 | 1px | 定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。 | 尽量避免改情况 |
| IE6，IE7 | 表单高度 | 表单元素select/option 下拉选框 对高度的支持不兼容 | 通常不设置高度 |
| IE6，IE7 | textarea | 各个浏览器下的默认滚动条显示不兼容 | 添加 overflow：auto； |
| IE6，IE7 | textarea | css3新增 resize 调整尺寸属性； | resize：none； 不能自由拖动改变尺寸， |
| IE6 | input背景滚动 | input背景随着内容增多而移动 | 在input外面添加一个div，div上设置背景，或者添加给其父级，input全部透明 |
| IE6 | 撑开父级宽度 | 子级宽度如果超过父级宽度，会撑开父级宽度，而其它浏览器不会撑开父级宽度 | 需要精确计算好 |
| IE6 | Fiexd | 不支持固定定位 position：fiexd； | 需要配合JS计算滚动尺寸实现兼容 |
| IE6 | 溢出 | 父级的 overflow:hidden; 包不住子级的relative; | 给父级也添加relative |
| IE6 | 1px | 定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。 | 尽量避免改情况 |
| IE6，IE7 | 表单高度 | 表单元素select/option 下拉选框 对高度的支持不兼容 | 通常不设置高度 |
| IE6，IE7 | textarea | 各个浏览器下的默认滚动条显示不兼容 | 添加 overflow：auto； |
| IE6，IE7 | textarea | css3新增 resize 调整尺寸属性； | resize：none； 不能自由拖动改变尺寸， |
| IE6 | input背景滚动 | input背景随着内容增多而移动 | 在input外面添加一个div，div上设置背景，或者添加给其父级，input全部透明 |
| IE6 | 撑开父级宽度 | 子级宽度如果超过父级宽度，会撑开父级宽度，而其它浏览器不会撑开父级宽度 | 需要精确计算好 |
| IE6 | 子集宽度撑满父级 | 父级元素浮动，如果要求子集元素宽度内容撑开，就给里面的子集块元素都加浮动，不然子集元素会撑到父级设置的宽度 | |
| IE6 | dotted | 1px dotted 在IE6下不支持 | 切图片背景平铺 |
| IE6 | margin消失 | 父级有边框的时候，子元素的margin值消失 | 触发父级的haslayout |
| IE6 | margin传递 | 有时候子级的margin值会传递到父级上 | 触发父级的haslayout |
| IE6，IE7 | 表单背景 | 如果tr于thead或tbody同时有背景，则thead和tbody的背景会消失 | 尽量避免 |
| IE6，IE7 | input border | 输入类型的表单控件加border：none；无效，，依然会有边框。 | 重置input的背景 |
| IE6 | PNG半透明 | PNG半透明图片在IE6下不起作用 | 解决方案：采用专属IE6的js插件 DD_belatedPNG_0.0.8a.js |
| PNG半透明图片会有从整个页面左上角掉下划入的情况 | 在其父级添加 相对定位 position：relative； | ||
| PNG半透明背景图尽量不要处理鼠标移入的背景图，会出现闪动的情况， | 移入之前都设定PNG半透明背景图，不过位置需要移出标签外，当鼠标移入后，将背景图移回原位。 | ||
| IE6 | ！important | 在！Important 后边再加一条同样的样式，会破坏掉 !important的作用，会按照默认的优先级顺序来走。 | 尽量避免 |
来源：https://www.cnblogs.com/Peng2014/p/4725891.html