There's a slight difference on the layout of my website from webkit browsers to Firefox and Internet Explorer. I need to target Firefox and IE to apply some CSS only in those two browser.

I've tried for Firefox:

@-moz-document url-prefix() {
    // CSS here
}

And I've tried for IE these two solutions:

<!--[if IE]><!-->
    // Load specific CSS file here
<!--<![endif]-->

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // CSS here
}

But nothing works. Do I need to do it with Javascript? If so, why can't I target it with CSS or HTML like everyone seems to do?

There's a slight difference on the layout of my website from webkit browsers to Firefox and Internet Explorer. I need to target Firefox and IE to apply some CSS only in those two browser.

I've tried for Firefox:

@-moz-document url-prefix() {
    // CSS here
}

And I've tried for IE these two solutions:

<!--[if IE]><!-->
    // Load specific CSS file here
<!--<![endif]-->

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // CSS here
}

But nothing works. Do I need to do it with Javascript? If so, why can't I target it with CSS or HTML like everyone seems to do?

• javascript
• css
• internet-explorer
• firefox

• 1 IE conditional ments most certainly do work. If you'd explain why you think you need to do something special for Firefox, you'd probably get a better answer. – Pointy Commented Dec 6, 2014 at 16:33
• Also, check here for a broad range of hacks ... browserhacks. – rfornal Commented Dec 6, 2014 at 16:35
• This is the website: link. If you go to the "CONTATO" section, you'll see that the social media icons are not aligned in Firefox and IE, but they are in Chrome and Opera and Safari on MacOS. That's one of the things I want to target for those two browsers. The other is a missing download image/link in the "CAMPANHAS" section. – David Matos Commented Dec 6, 2014 at 16:47
• Those icons are definitely not aligned in Chrome when I look at the page. They've got all sorts of conflicting styles. The best thing to do would be to fix your CSS, not attempt browser hacks. – Pointy Commented Dec 6, 2014 at 16:50
• 1 Please don't target specific browsers. Instead, explain what it is you're attempting to do, how Chrome differs from IE/Firefox, and we can work towards a non-hack cross-browser approach instead. – Sampson Commented Dec 6, 2014 at 22:42

2 Answers 2

seems to work for me :

// Firefox debug
@-moz-document url-prefix() {
    #id {rules: argument;}
    ...
}

// IE debug
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .class {rules: arg;}
    ...
}

Make sure your browser specific CSS is at the bottom of your CSS files. For ie it should be at the bottom of your head tag in your HTML and for moz make sure it's at the bottom of your CSS file.