0

我单独在 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 */
  } 
}

这两个例子都不起作用。

4

2 回答 2

1

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

如果您的页面在不同的浏览器中呈现不同，请确保您的标记和CSS有效。

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

可以使用 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>

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

于 2017-07-10T11:44:50.823 回答
-2

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

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

if (getChromeVersion() == 59) class.style.chrome59.margin-left = -10 + 'px'
}
于 2017-07-10T09:55:15.327 回答