浏览器兼容小知识

浏览器兼容问题

• 浏览器兼容问题
• 屏幕分辨率兼容问题
• 跨平台兼容问题

---

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-代码

兼容问题图片概览