有什么方法可以为特定的 chrome 版本应用 CSS 吗？

Question

我在 Chrome 59 版本 中遇到问题。为了排序，我需要 css hack 来单独针对 chrome 版本。我看到一篇带有此示例代码的文章说它可以工作，但在我的情况下它不起作用。

示例 1

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .logotext-n {
        .chrome59.margin-left: -10px; /* update for Chrome 59 issue */
     } 
}

示例 2

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .chrome59.logotext-n {
      margin-left: -10px; /* update for Chrome 59 issue */
  } 
}

这两个例子都不行。

Answer 1

一个 java 脚本答案（您可以在其中定位 chrome 的所有构建）是 java 脚本并使用类似

function getChromeVersion () {     
    var element = document.querySelectorAll(.logotext-n)[0];

if (getChromeVersion() == 59) class.style.chrome59.margin-left = -10 + 'px'
}

Answer 2

原则上，您应该始终针对功能检测而不是浏览器检测进行设计。

如果您的页面在不同浏览器中的呈现方式不同，请确保您的 markup and CSS 有效。

当所有其他方法都失败时，您可能需要检测浏览器，甚至是该浏览器的特定版本。据我所知，没有 CSS hack 可以专门用来检测 Google Chrome 的版本 59。一般来说，很难找到针对特定浏览器的特定版本的此类 hack。

可以使用 JavaScript 进行检测，这也可以用于将样式注入 DOM。

function isChrome59() {
  var test = navigator.userAgent.match(/chrom(?:e|ium)\/(\d+)\./i);
  if (test) {
    return (parseInt(test[1], 10) === 59);
  }
  return false;
}

if (isChrome59()) {
  var styles = document.createElement('style');
  styles.textContent = 'p { color: red; }';
  document.head.appendChild(styles);
}

p {
  color: blue;
}

<p>This text will be blue in all browsers, except in version 59 of Google Chrome, where it will be colored red.</p>

上面的示例加载了内联样式，但您当然也可以创建一个单独的样式表并插入一个 <link rel="stylesheet" href="..." /> 来引用它。

有什么方法可以为特定的 chrome 版本应用 CSS 吗？

Is there any way to apply CSS for specific chrome version?

css

compatibility

google-chrome

css-hack