html - 如何为不同的浏览器组合相同的 css 样式

Question

我正在使用 querySelector更改某些元素的样式。

对于某些样式，不同的浏览器有不同的版本。在这种情况下，Chrome 的 fit-content 和 Mozilla 的 -moz-fit-content。

如果我想在 Chrome 上运行，代码如下所示:

document.querySelector('.my-element').style.height = "fit-content";

对于 Mozilla:

document.querySelector('.my-element').style.height = "-moz-fit-content";

我的问题是:有没有办法将它们结合起来？通过上述工作方式，一次只适用于一个浏览器，我希望两者都适用。

Answer 1

鉴于可能答案的范围很大、不可预测(且可变)，应避免浏览器检测/嗅探。

在您的 CSS 中定义包含您需要的前缀的类，并将该类添加(或替换)到元素 MDN: className . JavaScript 将是一条语句，添加一个已经列出所有供应商前缀的类。

.anotherclass {
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

document.querySelector('.my-element').className = 'anotherclass';

如果你愿意，你也可以使用类似 PrefixR 的工具，或类似的，为您的样式表添加前缀。

另外值得一提的是 Can I use检查您是否还需要一些前缀。