problem in display:inline and display:inline-block

i have a problem in disp开发者_JAVA技巧lay:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....

---

You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:

<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />

<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
  <link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
  <link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

---

Here is a good overview of CSS browser hacks: http://brainfart.com.ua/post/css-hacks-overview/

I guess section 4, 8 or 9 could apply for your case.

---

IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:

.el { display:inline-block; *display:inline; *zoom:1; }

There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:

.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }

---

The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.

I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.