浏览器兼容性问题之学习笔记

1. 不同浏览器对于HTML标记内外边距属性具有不同定义：

//方法一：使用通配符，太过粗暴不建议使用
  *{
    margin: 0;
    padding: 0;
  }

//方法二：逐个元素设置
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, del, dfn, em, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, section, summary {
    margin: 0;
    padding: 0;
  }

2. 浮动元素float，若有横向margin，则在IE6显示下margin会变大：

在float元素标签样式中写 display: inline;

3. 设置较小高度容器，在IE6下不识别10px的高度：

overflow: hidden;

4. 百分比bug，父元素width: 100%，子元素各50%，则在IE6显示之和大于100%：

//在右边子元素添加
clear: right;

5. 对于透明度：

//IE浏览器 value:1-100
filter: alpha (opacity = value);

//其他浏览器 value: 0-1
opacity: value;

6. UC浏览器无法长按保存图片：

-webkit-touch-callout: default;

7. Chrom中文界面下默认将小于12px的文本强制按12px显示：

transform: scale(x, y);

8. 被点击访问过的超链接不再具有hover 和 active：

//改变样式的顺序为：L-V-H-A
a:link{}
a:visited{}
a:hover{}
a:active{}

9. 有关事件的：

9.1 阻止事件冒泡：

• IE：window.event.cancleBubble = true;
• 其他：event.stopPropagation();

9.2 阻止默认事件：

• IE：window.event.returnValue = false;
• 其他：event.preventDefault();

9.3 获取鼠标位置：

• IE：event.ClientX;
• 其他：event.PageX;