常见的浏览器兼容问题及解决方案笔记

在B站上面看了关于浏览器兼容问题解决的视频，在此做一下笔记

• 不同浏览器的标签默认的内外边距不同
  • 解决方案：
    • *{margin:0;padding:0;},也可以使用别人写好的成熟插件Normalize.css来清除默认样式
• 图片加a标签在IE9中会有边框
  • 解决方案：
    • img{border:none}
• IE6及更低版本浮动元素浮动边距双倍边距
  • 解决方案：
    • 不使用margin，使用padding
• IE6及更低版本中部分块元素有默认高度
  • 解决方案：
    • 给元素设置font-size:0;
• a标签蓝色边框
  • 解决方案：
    • a{outline:none}
• IE6不支持min-height属性
  • 解决方案
    • {min-height:200px;_height:350px}
• IE9以下浏览器不能使用opacity
  • 解决方案
    • Firefox/Chrome/Safari/Opera浏览器使用opacity;
    • IE浏览器使用filter
• IE6/7不支持display:inline-block
  • 解决方案:
    • {display:inline-block;*display:inline}
• cursor兼容问题
  • 解决方案：
    • 统一使用{cursor:pointer}
• IE6/7中Img标签与文字放一起时，line-height失效的问题
  • 解决方案：
    • 文字和<img>都设置float
• table宽度固定，td自动换行
  • 解决方案：
    • table设置{table-layout:fixed}
    • td设置{word-wrap:break-word}
• 相邻元素设置margin边距时,margin将取最大值，舍弃最小值
  • 解决方案：
    • 不让边距重叠，可以给子元素加一个父元素，并设置该父元素：{overflow:hidden}
• a标签css状态的顺序
  • 按照link--visited--hover--active的顺序编写
• IE6/7图片下边有空隙的问题
  • 解决方案：
    • img{display:block;}
• ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值
  • 解决方案：
    • ul {margin:0;padding:0;}
• IE中li制定高度后，出现排版错误
  • 解决方案
    • 设置line-height
• ul或li浮动后，显示在div外
  • 解决方案：
    • 清除浮动
    • 在ul标签后加<div style="clear:both"></div>来闭合外层div
• ul设置float后，在IE中margin将变大
  • 解决方案：
    • ul{display:inline;}
    • li{list-style-position:outside;}
• div嵌套p时，出现空白行
  • 解决方案：
    • li{display:inline}
• IE6默认div高度为一个字体显示的高度
  • 解决方案：
    • {line-height:1px;}
    • {overflow:hidden;}
• 在Chrome中字体不能小于10px
  • 解决方案：
    • p{font-size:12px；transform:scale(0.8);}