根据Angular 4组件中的浏览器加载不同的CSS规则 [英] Load different CSS rule depending on the browser in an Angular 4 component

问题描述

我有一个Angular 4应用程序，根据您使用的浏览器，它看起来完全不同.这是一个在Firefox 58上的外观示例(这就是我想要的外观):

I have an Angular 4 application that looks quite different depending on the browser you use. This is an example of how it looks on Firefox 58 (and it's the way I want it to look):

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

And this is an example of how it looks on Chrome 63:

几天前，我提出了一个问题，看是否可以解决此问题(

I opened a question a few days ago to see if I could fix this issue (Different 'div' heights in Chrome and Firefox) but I couldn't find a way to make it work for both browsers.

因此，我正在考虑根据使用Chrome或Firefox的用户来加载不同的CSS类. Angular 4+是否可以找到浏览器?然后，我要做的是使用组件模板中的ngClass加载适当的类，希望可以解决该问题.

So, I'm thinking on loading a different CSS class depending on the user using Chrome or Firefox. Does Angular 4+ have a way of finding out the browser? What I would do then is to load the appropriate class using ngClass in the component's template that would, hopefully, fix the issue.

还是有更好的选择?

预先感谢

推荐答案

做更多的研究，我在本文中找到了解决方案:

Doing some more research, I found the solution in this article:

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

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

In my case, this is the solution I used:

/* 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;
  }
}

感谢所有建议！

这篇关于根据Angular 4组件中的浏览器加载不同的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！