0

次のコード例があります: http://jsfiddle.net/RZUnh/3/

フィドルリンクに行きたくない人のためのマークアップは次のとおりです。

<table border="1">
    <tr>
        <td>
            <img src="http://static.tumblr.com/xicugzn/8YDm6eu1c/aviarios-del-caribe-sloth-sanctuary.10968.large_slideshow.jpg" height="150" />
            <div class="child">Overlay</div>
        </td>
        <td>
            <img src="https://leerburg.com/Photos/bamboostick874.gif" height="250" />
            <div class="child">Overlay</div>
        </td>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

そしてこれがCSSです。

td {
    min-height:70px;
    position:relative;
}

.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}

Chrome、IE 10、および Safari では、次のレイアウトが生成されます。 ここに画像の説明を入力

ただし、Firefox では、結果はまったく異なります (「オーバーレイ」が実際のテーブルの外にあることに注意してください)。 ここに画像の説明を入力

私はこの問題を 3 時間以上いじりましたが、開発部門の誰も問題の原因を知りません。

この件について調査したところ、TD 内の相対的な配置は良くないことがわかりました。提案に従って、相対レイアウトでその中に div コンテナーを作成しようとしましたが、代わりにレイアウトは次のようになりました (Firefox の場合):

ここに画像の説明を入力

この問題を解決するにはどうすればよいですか?

4

1 に答える 1

1

デモ

div内にラッパーを追加しましたtd:

<div class="wrapper">
  <img />
  <div class="child">Overlay</div>
</div>

css で最も高い画像の高さをハードコーディングする必要がある場合があります

table {
    position:relative;
}
div.wrapper {
    height:100%;
    min-height:255px; /* height of tallest image (250px) + .child bottom value (5px) */
    position:relative;
}
div.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}
于 2013-03-21T14:57:56.317 に答える