css - 根据 Angular 4 组件中的浏览器加载不同的 CSS 规则

Question

我有一个 Angular 4 应用程序，它看起来会因您使用的浏览器而大不相同。这是它在 Firefox 58 上的外观示例(这是我希望它的外观):

这是它在 Chrome 63 上的外观示例:

几天前我提出了一个问题，想看看我是否可以解决这个问题 (Different 'div' heights in Chrome and Firefox)，但我找不到让它适用于两种浏览器的方法。

因此，我正在考虑根据使用 Chrome 或 Firefox 的用户加载不同的 CSS 类。 Angular 4+ 是否有找到浏览器的方法？然后我要做的是在组件的模板中使用 ngClass 加载适当的类，这有望解决问题。

或者有更好的选择吗？

提前致谢

Answer 1

经过进一步研究，我在这篇文章中找到了解决方案:

https://www.codeproject.com/Tips/1167666/How-to-Apply-CSS-HACKS-for-Different-Browsers-Chro

就我而言，这是我使用的解决方案:

/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  td {
    height: 1px;
    vertical-align: top;
  }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
  td {
    height: 100%;
    vertical-align: top;
  }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  td {
    height: 100%;
    vertical-align: top;
  }
}

感谢所有的建议!