javascript - 为 Chrome 动态创建一个 CSS 选择器

Question

我在 Chrome 和 Safari 之间存在一些像素差异，我无法找到一种合适的方法来使用 css hack 为它们中的每一个提供不同的样式。

我已经能够使用 javascript 修复它，但是在页面加载和应用之前会有延迟，因此用户会看到移动。

function chromeStyle() {
if (window.chrome) {
var a = document.getElementById("id");
if (a) {
a.style.marginLeft = 5px;
}
}
}

我知道可以将以下代码放入 html 文档的头部，然后在样式表中使用“.JS .mystyle{}”来应用启用了 javascript 的样式。

<script type="text/javascript">
document.documentElement.className = 'JS';
</script>

我想知道是否可以以类似的方式为 Chrome 创建一个可以应用于样式表的选择器？

if (window.chrome) {
create a selector for chrome here
}

并在样式表中将其应用为“.chrome .mystyle{}”。

谢谢。

Answer 1

I dont know if this is easier then what you're trying to do with JS. But when i need to override certain styles for a specific browser I just create a check for the browser serverside, and then include an extra stylesheet that overrides the base styles.