Img в h2 не выстраивается в Internet Explorer

Question

В данный момент я создаю свой личный веб-сайт и хочу, чтобы в заголовках h2 в одной строке были изображения. Разметка, которую я сейчас использую, проверяет, так же как CSS и нужный эффект отображаются в Firefox, Chrome, Safari и IE8 в стандартном режиме.

IE8 в режиме совместимости и IE6 + 7, однако, помещают изображение в следующую строку, что, конечно, выглядит ужасно. Я не совсем уверен, как обойти это, и в настоящее время я застрял. Буду очень признателен за помощь и объяснение, возможно, за указатель, где я мог бы больше узнать об этих конкретных вещах с помощью IE.

Код можно посмотреть здесь: http://storage.planet -tiax.de / test / index.html

Answer 1

Не используйте тег <img> для того, что вы пытаетесь сделать. Хотя они являются изображениями, они не предназначены для тега <img>. Этот тег предназначен для отображения изображений, которые содержат на странице. В вашем случае изображения являются стилистическими элементами страницы и, следовательно, относятся к CSS, то есть как фоновые изображения.

Размещение изображений вместо CSS в качестве фоновых изображений также должно уменьшить ваши проблемы с IE:

h2#weblog { background: url(images/weblog.png) right no-repeat }

Что касается ресурса, который сообщит вам о головных болях в IE, я обнаружил, что QuirksMode дает хороший обзор проблем, связанных с IE, а также дает представление о том, как их исправить.