3

我一直在试图找到一个适用于 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 个声誉”才能做到这一点:(

4

1 回答 1

0

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

有很多方法可以显示带有标题的图像，但是根据给定的要求，如果您也想要 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>
于 2013-06-13T05:56:29.033 回答