How to display <div> inline surrounded with text?

I would like to display a <div> element inline so that it is surrounded with text.

My code is:

<span>Here is some <div class="a"></div> text</span>

Let's say, the class "a" is defined as below:

.a {
    width:20px;
    height:20px;
    background-color:#f0开发者_运维技巧0;
}

The result should be like this:

Is it doable? Thank you for any suggestions.

---

There's a CSS property display: inline-block; but I don't know how compatible with browsers it is (works fine in my FF)

I'll do some quick testing for you.

Update

I've tested it in Chrome, FF and IE. Works in IE8, not IE7. Chrome is fine as is FF

---

Basically just add display: inline-block; You might want to tune it a bit afterward, but this should work everywhere except IE6