Question

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

Answer 1

问题中的代码也适用于IE，但由于缺少support to CSS table display，因此在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>

获取标题文本换行在IE中工作

1 个答案: