对目前所遇见的兼容性笔记进行整理分类:
不兼容浏览器 | 问题概要 | 问题描述 | 解决方法 |
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的作用,会按照默认的优先级顺序来走。 | 尽量避免 |