HTML&CSS兼容性总结

时间:2023-01-26 18:58:51

       对目前所遇见的兼容性笔记进行整理分类:

不兼容浏览器 问题概要 问题描述 解决方法
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的作用,会按照默认的优先级顺序来走。 尽量避免