ie8 - ограничение ширины текста шириной изображения, когда изображение имеет только максимальную ширину

Question

У меня есть страница с текстом и div с изображением и кратким текстом об изображении справа.

Я хочу установить только максимальную ширину изображения (а не ширину) иЯ хочу, чтобы текст изображения был ограничен шириной изображения.Я использовал один из ответов здесь: Ограничить текст шириной изображения родного брата / автоматической ширины в CSS - и установить правильный div: display: table и width: 1px.Но теперь у меня есть проблема в ie8, потому что ie8 имеет ошибку, описанную здесь: http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug - Это дает неправильную ширину элементу, когда максимальная ширина дочернего элемента меньше внутренней ширины.

ВПо ссылке выше есть решение - установить макет таблицы: исправлено, но это приводит к тому, что мой div имеет ширину 1px.

У кого-нибудь есть решение?

Спасибо!

PS У меня есть фотографии, иллюстрирующие проблему, но я новый пользователь, поэтому не могу их опубликовать ...

Answer 1

Вы можете использовать свойство CSS letter-spacing в сочетании с размером шрифта для начинающих ...

you_selector {letter-spacing: 2px;}

Глядя на код jsFiddle, вот изменения, которые вы должны внести ...

Добавить этот CSS ...

.ImageTextPanel {float: none;}
.ImageTextPanel span {letter-spacing: 0px;}

Сохранить весь текст внутри элементов параграфа и интервала.Хотя технически допустимо помещать текст непосредственно в элементы деления, это очень плохая практика.

<DIV class="ImageTextPanel"><span>Text about the image, may be multiple lines.</span></DIV>

Также не используйте заглавные буквы для HTML, это глупо.Если вы ДЕЙСТВИТЕЛЬНО хотите преуспеть, научитесь программировать на XHTML как application / xhtml + xml (вы также можете использовать XHTML5), так как его более строгие правила значительно упрощают отладчик, и вы в конечном итоге будете летать быстрее, чем просто.