3

私は、IEで動作するか、IEをうまくプレイできるようにするための解決策を見つけようとしています(ha!)。

私がしたいこと: 画像とキャプションを含む 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

問題のコードは IE でも動作しますが、 CSS table displayがサポートされていないため、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 に答える