2018-07-11 记录一些兼容性问题

今天开始看张鑫旭大神的《css世界》，用这篇简书记录一下看到的兼容性问题

• ：active
  IE Chrome正常变色符合预期，Firefox没有变化

• display：list-item
  IE浏览器不支持为元素的display值为list-item

• Firefox浏览器<img>设置width和height无效
  对于firefox浏览器 src默认的<img>不是替换元素而是一个普通的内联元素，使用的是类似<span>的内联元素的尺寸规则 宽高会无效

• 当<img>标签的src属性无效时，chrome浏览器默认宽高是00和而IE浏览器是2830**
  原因是当img标签的src属性无效时，ie浏览器提供了一个默认的占位元素，它的宽高是28*30。另外高版本的ie浏览器对占位元素进行了透明化处理。

• button按钮内置的padding
  button 和input select等诸多元素都内置了padding
  以button为例，当我们设置

   padding：0；
  

  Firefo浏览器左右还是会有padding

  
  
  chrome浏览器
  
  
  firefox浏览器
  
  

  在ie7浏览器下 文字如果变多 左右padding会逐渐变大

  解决办法：

  火狐浏览器

   button::-moz-focus-inner { padding:0; }
  

  ie7

  button{ overflow: visible; }
  

• css3 nth-of-type(3n)
  • :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
  • 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
    在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

    p:nth-of-type(3n+0)
    {
        background:#ff0000;
    }