有什么方法可以将CSS应用于特定的chrome版本吗? [英] Is there any way to apply CSS for specific chrome version?

问题描述

我仅在 Chrome 59版本中遇到问题.我需要 css黑客来单独定位该chrome版本.我看到一篇有关此示例代码的文章说它可以工作，但就我而言，它是行不通的.

I'm facing a problem in Chrome 59 version alone. to sort that I need a css hack to target that chrome version alone. I saw an article with this example code says its working, but in my case it doesn't work.

示例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 */
  } 
}

两个示例都不起作用.

推荐答案

原则上，您应该始终设计用于功能检测，而不是浏览器检测.

You should in principle always design for feature detection, not browser detection.

如果您的页面在不同浏览器中的呈现方式不同，请确保您的标记和

If your page renders differently in different browsers, make sure that your markup and CSS are valid.

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

When all else fails, you may need to detect a browser and even a specific version of that browser. As far as I know, there is no CSS hack that can be used to detect version 59 of Google Chrome specifically. In general, it is very hard to find such hacks for specific versions of specific browsers.

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

It is possible to detect using JavaScript, and this can also be used to inject styles into the 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="..." />来引用它.

The above example loads inline styles, but you can of course also create a separate stylesheet and insert a <link rel="stylesheet" href="..." /> to reference it.

这篇关于有什么方法可以将CSS应用于特定的chrome版本吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！