Vue计算的带有动态变量的内联样式在Safari / IE中不起作用

Question

我对来自计算变量样式的元素具有动态样式。在计算属性样式中，我返回带变量的css。在其他浏览器中，它工作正常，但在Safari或IE中为内联样式

元素：

<button :style="styles" name="button"></button>

计算变量样式：

styles() {
 return {
      border: `${this.is('flat')?0:1}px solid ${_color.getColor(this.color,1)}`,
      background: this.hoverx?_color.getColor(this.color,.1):'transparent',
      color:_color.getColor(this.textColor,1) || _color.getColor(this.color,1)
 }
}

这是浏览器中的样子

Chrome中元素的内联CSS：

Safari中元素的内联CSS

我发现，当我预定义css属性时，一切都正常工作

styles() {
 return {
      border: `${this.is('flat')?0:1}px solid red`,
      background: this.hoverx?_color.getColor(this.color,.1):'transparent',
      color:'red'
 }
}

Safari中元素的内联CSS（删除变量后）

Answer 1

根据您使用的Safari和IE版本，可能不支持简写background属性。

虽然在构建期间使用postcss或项目中的替代方法处理了静态定义的样式，但并未为浏览器兼容性而编译动态绑定的样式。

要解决此问题，请尝试将速记background属性拆分为相关样式。在上面的示例中，仅使用background-color就足够了：

return {
  backgroundColor: this.hoverx ? _color.getColor(this.color, 0.1) : 'transparent',
  // ... other styles
}

如果您需要覆盖其他背景选项，则可以单独指定它们：

backgroundImage: 'none',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: 'cover'

Answer 2

谢谢您的努力。我尝试拆分这些属性，并且除color属性外，每个属性都显示在浏览器中。但是最后我发现有人通过了颜色“ rgb（0，0，0，0.5）”（因此只有带有alpha通道的rgb）。最后，缺少字母'a'导致CSS问题。 Chrome能够以某种方式将其复制为rgba，但其他浏览器却无法