safari 真是个矫情的小妹子,连background都不能直接跟cover !

正文开始

原本很简单一句css实现的样式,个人很喜欢一口气写完,在phpstorm的提示下,按 tr就是透明度transparent 按 no就no-repeat 然后0 0/cover 原代码:

.plus-bg09 .handBox  {
    width: 31px;
    height: 31px;
    display: inline-block;
    background: url("images/phone/lr.png") transparent no-repeat 0 0/cover;
}

但是safari下就暴露不兼容了,debug时,科目1中熟悉的感叹号出现在了background的左边 ! 解药

.plus-bg09 .handBox  {
    width: 31px;
    height: 31px;
    display: inline-block;
    background: url("images/phone/lr.png") transparent no-repeat 0 0;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

结语:cover属性不受友好待见,要单另设置。以后再也不能优雅的写0 0/cover了

正文结束

Flex 布局教程:语法篇 css3人物按钮奔跑特效