根据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屋!