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

原则上，您应该始终设计特征检测，而不是浏览器检测。

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

当其他所有方法都失败时，您可能需要检测浏览器甚至是该浏览器的特定版本。据我所知，没有可用于检测谷歌浏览器版本59的CSS黑客。一般来说，很难找到特定浏览器特定版本的黑客攻击。

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

＆＃13;

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);
}

＆＃13;

p {
  color: blue;
}

＆＃13;

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

＆＃13;

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

Answer 2

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

的内容

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

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

有没有办法为特定的chrome版本应用CSS？

2 个答案: