H5标签兼容
1 document.createElement("header");
document.createElement("section");
document.createElement("footer");
display: block;
2 引入js
浮动
- 元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
- 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题
- IE6下子元素超出父级宽高,会把父级的宽高撑开
- p 包含块元素嵌套规则。
margin -
Margin-top传递:触发BFC(overflow:hidden)、haslayout(zoom:1;)
上下margin叠加:尽量使用同一方向的margin,比如都设置top或者bottom
在IE6下父级有边框的时候,子元素的margin值消失; 解决方法:触发haslayout
Display:inlne-block1 在一行显示
2 行内属性标签支持宽高
3 没有宽度的时候内容撑开宽度
问题:
1 代码块换行被解析
2 ie6 7 不支持
解决方法:
*display:inline;
*zoom:1;
Ie6最小高度在ie6下高度小于19px的元素,高度会被当做19px处理
解决方法:overflow:hidden;
Ie双边距在IE6下,块元素有浮动和横向的margin值,横向的margin值会被放大成2倍
解决方法:*display:inline;
IE6 7 下 li1 左右两列布局,右边右浮动IE6 7 下折行
解决方法:左边元素也加浮动
2 li里元素都浮动li在IE3 7 下方会产生4px间隙问题;
解决方法:*vertical-algin:top;
IE6 7下文字溢出BUG两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过30px
解决方法:两浮动元素中间避免出现内联元素或者注释
与父级宽度相差3px或以上
定位- IE6 7 父级元素的overflow:hidden 是包不住子级的relative
- 解决方发:针对IE6 7 给父级元素添加relative
- IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
- 解决方法:避免父级宽高出现奇数
- IE6下绝对定位元素和浮动元素同级的话绝对定位元素消失
- 解决方法:让两者不是处于同级
IE6 input
- IE6 下input的空隙, 会透出背景的颜色
- 解决方法:*float:left;
IE6 下 输入类型表单控件背景问题
- IE6 下 输入类型表单控件背景问题,若以小图标为在输入框的左侧,小图标会随着用户的输入左移;
- 解决方法:给背景图片加固定定位background-attachment: fixed;
PNG24兼容
解决方法:
- JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix('xxx');
- 原生滤镜
_background:none;
_filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
- 直接换图片。。。。