2

「innerDIV」を含む1つの「outerDIV」を持つこのコードがあります。クロムでは「innerDIV」のサイズは491pxですが、IEでは425px（outerDIVと同じ）です。したがって、Chromeでは、「innerdiv」の最初の2つの子、「My test string＃1」と「test2」を確認できます。しかし、IEの場合、私は最初の子しか見ることができません。

FirefoxはIEと同じように動作するため、「正しい」動作がどうあるべきかはよくわかりません。ただし、IEにChromeと同じように動作させたいと思います。

私はいくつかのcssスタイル（主にオーバーフローと表示）を試してきましたが、それでも正しく行うことができません。IEは、要素を合わせるために幅ではなく高さを拡張します。

IEがdiv要素をインラインでラップするようにcssを変更する方法を理解するのを手伝ってくれませんか？ただし、制限として、HTMLの幅を変更することはできません。利点として、私はIEに対してのみロードするcssを使用して、この種のIEの不整合にパッチを適用しています。同じcssはchromeには読み込まれないので、IECSSを変更するときにchromeをいじることを心配する必要はありません。前もって感謝します！

<html>
    <head>
    <style type="text/css">

        <!--

            body {
                font-family: helvetica;
            }


            .myContainer {
                overflow: hidden;
                border: 1px solid rgba(0, 0, 0, .5);
                font-size: 14pt;
                height: 49px;
                line-height: 49px;
                overflow: hidden;
                display: block;
            }

            .myContainer > DIV {
                float: left;
                white-space: nowrap;
                display: block;
            }

            .myContainer .item:first-child {
                padding-left: 10px;
            }

            .myContainer .item {
                float: left;
                padding-right: 32px;
            }

        -->

    </style>

    </head>

        <body>

            <div id="outerDIV" class="myContainer" style="display: block; width: 425px;">
                <div id="innerDIV">
                    <div class="item">
                        --------My test string #1--------
                    </div>
                    <div class="item">
                        ------test2-------
                    </div>
                    <div class="item">
                        test
                    </div>
                </div>
            </div>


        </body>
</html>
4

3 に答える 3

3

ページにタグが必要doctypeです。そうしないと、Quirks モードでレンダリングされます。

それが正確に何を意味するかはブラウザによって異なりますが、基本的には非常に古いブラウザと互換性を保とうとします。IE では、非標準のボックス モデルがトリガーされ、サイズの違いが説明されます。

使用する doctype タグの doctype 宣言の W3C 推奨リストを参照してください。

于 2012-10-18T22:59:35.583 に答える
0

cssだけでは解決できませんでした。IE の場合、これを修正する唯一の方法は、「innerDIV」要素の幅をその子の offsetWidth の合計以上にすることです。だから私はこれを私のJSコードに追加しました（IEの特別なケース）： 

var len = innerDiv.childNodes.length,
          innerDivWidth = 0,
          i;

 for(i = 0; i < len; i++){
    innerDiv += innerDiv.childNodes[i].offsetWidth;                                             
 }

 innerDiv.style.width = (innerDiv + 1) + 'px';  //Safety measure to make up for the decimal places. I guess we could write this line in a better way by rounding up, etc.
于 2012-11-01T15:46:11.347 に答える
0

set the width of .item... containeroverflow: hiddenは、幅がコンテナーの「行」を超えるため、垂直に表示される項目を非表示にします。フローティングを使用する場合は、幅を設定しておくとよいでしょう。DOCTYPE も設定することが非常に重要です。私は個人的loose.dtdに良い競争力を与えるものを使用しています。

于 2012-10-18T23:04:00.997 に答える