Hiding Code For Specific Browser

If I have a simple piece of code for example

<div> Test Div </div>

I was wondering how (using CSS) I could make this Div appear only for users of a certain browser.

For example, what if I 开发者_开发技巧want to build a "Chrome only feature", like an image or a div? How do I specify not to show up in Firefox and IE?

I'm doing it for all the wrong reasons, I have a garbage site I'm working on. So I used a hacked fix to make something sit where I want it to and it works in every browser except Firefox so I want to just remove the image in FF.

To hide an image in only Firefox, use:

@-moz-document url-prefix() {
    #myImg {
        display: none
    }
} 

See: https://developer.mozilla.org/en/CSS/@-moz-document

That's cleaner (and more reliable) than using JavaScript, at least for your use case.

I do think that you must be doing it wrong if the solution is to hide an image in only Firefox.

There is no complete and portable solution for this. You can use server side checking and using different CSS files for different types of browsers, you can use Conditional comments for Internet Explorer or you can use browser specific features or hacks.

Set the div to display:hidden in CSS. Then setup a JavaScript function to run which detects the browser and adds that to the document.body.className attribute.

Then back in your CSS file, target it via CSS where:

body.chrome div.hidden { display:block!important; }