HTML&CSS兼容性总结

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

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

巴特西

HTML&CSS兼容性总结

最新文章

热门文章