Как отобразить <div>встроенный текст?

Question

Я хотел бы отобразить встроенный элемент <div>, чтобы он был окружен текстом.

Мой код:

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

Скажем, класс "a"определяется следующим образом:

.a {
    width:20px;
    height:20px;
    background-color:#f00;
}

Результат должен быть таким:

Это выполнимо?Спасибо за любые предложения.

Answer 1

Есть свойство CSS display: inline-block;, но я не знаю, насколько оно совместимо с браузерами (прекрасно работает в моем FF)

Я проведу небольшое быстрое тестирование для вас.

Обновление

Я тестировал его в Chrome, FF и IE.Работает в IE8, а не IE7.Хром в порядке как FF

Answer 2

В основном просто добавьте display: inline-block; Возможно, вы захотите немного позже настроить его, но это должно работать везде, кроме IE6