Stephan LamoureuxWeb browsers are built with different rendering engines, and this causes small differences in the way your website appears between browsers. The sizing may be a little different, the colors aren't consistent, and many more things of that nature.
To counter this, we can use the following CSS to target and style specific browsers.
Chrome & Safari (Webkit)
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
Firefox
@-moz-document url-prefix() {
.class {
property: value;
}
}
Microsoft Edge
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
IE11 and up
_:-ms-fullscreen, :root .ie11up {
property: value;
}
