1

これが私の最初の質問です。同様の疑問を検索してみましたが、Internet Explorer (10+) でコードが思い通りに動作しない理由を説明できるものを見つけることができませんでした。

3 つのセル表示 div を作成しました。3 つすべてが幅 100% です。3 つすべてを、親のテーブル表示 div 内で可能な最大幅 (ボディ幅の 100%) にしたかったのです。Firefox と Chrome では、すべてが計画どおりに機能します。しかし、IE はこれを無視しているようで、3 つすべてを 100% 幅にします。

コードは次のとおりです。

HTML:

<div id="picture-holder">
    <div class="each-picture" id="picture-red">
    </div>
    <div class="each-picture" id="picture-blue">
    </div>
    <div class="each-picture"  id="picture-green">
    </div>
</div>

CSS:

.each-picture{
 display:table-cell;
 height:100%;
     width:100%;   
 overflow: hidden;
 vertical-align:middle;
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center center;
 -moz-transition:width 2s;
 -webkit-transition: all .5s;
 transition: width 0.5s;
}
#picture-red{
background-color:red;
}
#picture-blue{
background-color:blue;
}
#picture-green{
background-color:green;
}

このフィドルがすべてをより明確にすることを願っています: http://jsfiddle.net/AU4f5/

スペルや文法の間違いがありましたら申し訳ありません。そして、この質問がガイドラインに沿っていることを本当に願っています。

4

1 に答える 1

3

テーブル セル (クラス) として書式設定する要素width: 100%から設定を削除するだけです。どうやら、使用可能な幅をこれらの要素に均等に分割したいと考えており、それらのコンテナを でテーブルとして表示することで、それが実現します。diveach-picturetable-layout: fixed

div内部要素 (「セル」)の幅を設定する必要はありません。その場合、それらは に設定する必要がありますwidth: 33.3333%。それらの幅を 100% に設定すると、ブラウザはそれぞれにテーブルの合計幅の 100% を与えるように要求します。これはもちろん不可能です。ブラウザーが異なれば、これは異なる方法で処理されます。

于 2013-10-16T19:50:08.330 に答える