web-dev-qa-db-ja.com

Internet Explorer 8は、「display：table-cell」要素の幅を無視します

quirksモードによる 、Internet Explorer 8は表示プロパティのテーブルオプションをサポートしていますが、この例では非常に奇妙な動作を示します
http://jsfiddle.net/e3cUn/3/

通常のブラウザでは、内側の画像は、寸法比（ストレッチ）を変更せずに150x150ボックスに収まるように拡大縮小されます。

alt text

ただし、IE8では、外側のボックス（青いボックス）も伸びます。
alt text

1）そのようなものを見たことがありますか？ text-align:centerに関連しているようです。このプロパティを削除すると問題は解決しますが、画像を中央に配置する必要があります（少なくとも、ブラウザ以外では）。

2）これを適切に修正できない場合、IEに特別なdisplay値を提供するにはどうすればよいですか？ #display: block;のようないくつかの例をウェブ上で見ましたが、それらはすべてIE7までしか機能しません。

edit<!--[if IE 8]>や同様のコマンドをhtmlに入れることは知っていますが、実際にはcssファイルでそれを行う方法を探していました。このようなもの

    display: table-cell;
    #display: block;

2行目はコメントではなく、ie7以下の以前の値を上書きします。 （ie8ではありません）

ありがとう！

htmlcssinternet-explorerinternet-explorer-8
16
Nikita Rybak

バウンティを追加した後、CSSをIE8にターゲティングすることで、この問題を回避することになりました。私はすでに PaulIrishの<html>要素にクラスを追加する手法 条件付きコメントを使用して使用していました：

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

したがって、私がしなければならなかったのは、IE 8以下のCSSルールを追加することだけです：

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

画像を垂直方向に中央揃えするためのテクニック と組み合わせると、これは私に素晴らしいクロスブラウザソリューションを提供します。

19
Andy E

Ie8では画像の実際の幅がテーブルに使用されるため、max-widthの代わりにwidthを使用してください。これを確認してください フィドル 。

CSSを再配置します：

.root img {
    width: 130px;
    max-height: 130px;   
}

更新

CSS：

.root span {
    width:130px;
    overflow:hidden;
    display:inline-block;
}
.root img {
    max-width: 130px;
    max-height: 130px;
}

HTML：

<div class="root">
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png  /></span>
</div>
12
Sanooj

display:table-cell要素の親コンテナにdisplay:table属性（およびtable-layout:fixed）がある場合に役立つようです。 この例 および this関連する質問 。

4
0x4a6f4672

  1. Text-align：centerが機能しない場合は、代わりに次のことを試してください（テーブルレイアウトを使用する必要がある理由がない限り）。これは通常、ブロックレイアウト要素を中央に配置するための推奨される方法です。 text-align centerを使用することは、必要な場合のフォールバックですが、私の経験では信頼性が低くなります。ネストされたdivなどには使用できません。

    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

  2. IEのカスタムオーバーライドを行う必要がある場合、最も簡単な方法は、外部スタイルシートを使用し、<head>セクションに以下を指定することです。

    <!--[if lte IE 8]>
   <link type='text/css' rel='stylesheet' src='link-to-your-source'/>
<[endif]-->

    そのスタイルシートを通常のスタイルシートの下に指定すると、それをオーバーライドする必要があります。含まれている場合は、オーバーライドする必要のあるステートメントの最後に!importantタグを指定することをいつでも利用できます（ただし、絶対に必要な場合を除いて、子要素の継承を台無しにするため、常に回避することをお勧めします。それを覚えておく必要があります）。例えば：

    .root img {
    text-align: left !important;
    ...
}
2
Chris Krycho

doctypeタグはありますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

私はIEで一度同じ問題を抱えていましたが、それで問題は解決しました。

幸運を

0
Sebastjan