Detect Browser Support for display:inline-block

Question

How can you detect if a browser supports the CSS attribute display:inline-block?

Answer 1

Well, here's what you can go if you want to do it purely by examining the bavhiour of the browser w/ javascript instead of user agent sniffing:

Set up a test scenario, and a control scenario. With, say, the following structure:

• div
  • div w/ content "test"
  • div w/ content "test2"

Insert one copy into the document with the two internal divs set to inline-block, and insert another copy into the document with the two internal divs set to block. If the browser supports inline-block, then the containing divs will have different heights.

Alternate answer:

You can also use getComputedStyle to see how the browser is treating a given element's css. So, in theory, you could add an element with "display: inline-block," and then check the computedStyle to see if it survived. Only problem: IE doesn't support getComputedStyle. Instead, it has currentStyle. I don't know if currentStyle functions identically (presumably it functions similarly to the behaviour we want: disregarding "invalid" values).

Answer 2

According to the QuirksMode charts, the only mainstream browsers not supporting inline-block are IE6 and 7. (Well, they support it, but only for elements which have a native display type of inline.) I'd just assume it is supported and then apply a workaround for IE6/7 via conditional comments.

(Note: I'm ignoring Firefox 2's lack of support for inline-block and assuming the vast majority of users have upgraded to FF3, but brief googling didn't unearth any numbers to back that up. YMMV.)

If determining support from JavaScript is your only option however, you'll have to fall back to user-agent sniffing. The YAHOO.env.ua class from the YUI library is a handy chunk of code that you could copy and use. (It's BSD licensed, doesn't depend on other parts of the YUI library, and is only about 25-30 lines without comments)