今天开始看张鑫旭大神的《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
在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;
}