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

【问题标题】：Vue computed inline styles with dynamic variables not working in Safari/IEVue 使用动态变量计算的内联样式在 Safari/IE 中不起作用
【发布时间】：2019-07-15 16:15:42
【问题描述】：

我有来自计算变量样式的元素的动态样式。在计算属性样式中，我返回带有变量的 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（删除变量后）

【问题讨论】：

标签： javascript css internet-explorer vue.js safari

【解决方案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'

【讨论】：

【解决方案2】：

感谢您的努力。我尝试拆分这些属性，并且除了颜色属性之外的每个属性都显示在浏览器中。但最后我发现有人通过了颜色 "rgb(0, 0, 0, 0.5)" （所以只有带有 alpha 通道的 rgb ? ）。最后，缺少字母“a”导致css出现问题。 Chrome 能够以某种方式将其复制为 rgba，但其他浏览器不能

【讨论】：