浏览器兼容问题
- 浏览器兼容问题
- 屏幕分辨率兼容问题
- 跨平台兼容问题
1.不同浏览器默认标签的padding与margin不一致
选中标签统一重写样式
引入Normalize.css
2.图片存在默认间距
使用浮动float
3.清除浮动float
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
4.链接访问过后hover样式不出现的问题
a:link{}
a:visited{}
a:hover{}
a:active{}
5.IE6块标签浮动,导致margin有问题
新增样式 _display:inline;
6.IE6/7设置较小高度的标签,小于10px,会被自动撑高
新增样式 overflow:hidden;
7.内联标签存在间距问题
设置父级 font-size:0; 或者标签设置浮动
8.内联标签设置为块级元素,采用float布局,IE6存在间距问题
.element-inline-block{
display:block;
display:inline;
display:table;
}
9.标签设置min-height不兼容问题
.element-min-height{
min-height:200px;
height:auto !important;
height:200px;
overflow:hidden;
}
10.IE盒模型与标准W3C盒模型不一致
设置 box-sizing:border-box/content-box;
11.chrome中文界面默认将小于12px的文本,强制按照12px显示
-webkit-text-size-adjust:none;
11.IE9以下浏览器不支持html5标签
引入html5shiv
<!--[if lt IE 9]>
<script type="text/javascript" src="common/js/html5shiv.min.js"></script>
<![endif]-->
12.IE9以下浏览器不支持css3
引入respond
<!--[if lt IE 9]>
<script type="text/javascript" src="common/js/respond.min.js"></script>
<![endif]-->
13.火狐浏览器无法通过.获取自定义属性
统一通过getAttribute()获取自定义属性
14.IE浏览器元素对象存在属性x/y;火狐浏览器元素对象存在pageX/pageY;
兼容性获取:element.x = element.x || element.pageX;
块元素
div-块级容器,h-标题,hr-水平分割线,p-段落,ul/ol-列表,
table-表格,from-表单,address-地址,center-居中对齐块,dir-目录列表
内联元素
input-输入框,label-表格标签,img-图片,span-内联容器,
a-链接,br-换行,select-选择,small-小字体,big-大字体,strong-粗字体,textarea-多行文本,code-代码