让标题文本换行在 IE 中工作答案

【问题标题】：Getting caption text wrap to work in IE让标题文本换行在 IE 中工作
【发布时间】：2013-06-09 06:15:51
【问题描述】：

我一直在尝试找到一个适用于 IE 的解决方案，或者让 IE 玩得更好（哈！）。

我想要做的：创建一个包含图像和标题的 div，但不允许标题将 div 拉伸得比图像更宽，而是打破文本行（换行），而不必指定宽度这可以动态使用。

到目前为止，我发现可以在 IE 以外的浏览器中使用：

<div id="featured-image">
<img src="images/cats-brenda.jpg" alt="Litter of Kittens"/><br/>
<span class="caption">Litter of kittens at the Sacramento County Animal 
Shelter (Image by: Brenda Bongiorno)</span>
</div>

CSS：

#featured-image {
display: table; min-width: 1px; float: left; margin-right: 10px;}
#featured-image .caption {display: table-caption; caption-side: bottom;}

这很好用，只是在 IE 中不行。相反，在 IE 中，由于标题比图像宽，它会拉伸整个 div 以匹配标题，而不是图像，将其推入文章中。

我会发布屏幕截图，但我必须“拥有 10 个声望”才能做到这一点:(

【问题讨论】：

这仅在 IE7 中不起作用，对吧？
可以试试max-width:100%
我已经尝试过 Dominic Bc :( 而且它似乎适用于所有 IE 9 及更低版本。我还有一个 div 不介意它的位置并拉伸容器的 100% 宽度而不是避免表格（或 div）。

标签： html css image internet-explorer caption

【解决方案1】：

由于缺少support to CSS table display，问题中的代码也适用于 IE，但不适用于 IE 7（或更早版本）。

有many ways可以显示带有标题的图像，但是在给定的要求下，如果你也想要IE 7支持，唯一合理的解决方案是使用HTML表格：

<table>
<caption align="bottom" style="text-align: left">
Litter of kittens at the Sacramento County Animal 
Shelter (Image by: Brenda Bongiorno)</caption>
<tr><td>
<img src="http://lorempixel.com/150/100/animals" alt="Litter of Kittens"/></td></tr>
</table>

【讨论】：

这有点帮助，但现在我有一个 div，我为跨越整个宽度的引号创建了一个 div。好吧，它以前没有用，但我想这是另一个问题。 :)
虽然这是官方的 html5 解决方案：stackoverflow.com/questions/6523560/… 以上对于使用 ckeditor 或 tinymce 的用户来说更好，因为这些 JS 编辑器增强了表格管理。使用这种格式可以让他们在本地编辑标题和更改表格对齐方式，而不是无法使用
做很多事情，除非他们放到源代码中。