56

非常に大量のデータを含む可能性のある要素がありますが、ページレイアウトを台無しにしたくないので、コンテンツが収まらないときにスクロールバーが表示されることを期待して設定max-height: 100pxします。overflow:auto

FirefoxとIE7ではすべて正常に動作しますが、IE8はのoverflow:hidden代わりに存在するかのように動作しoverflow:autoます。

試しましたがoverflow:scroll、それでも役に立ちません。IE8は、スクロールバーを表示せずにコンテンツを切り捨てるだけです。max-height宣言を変更しheightてオーバーフローが正常に機能するようにします。これはとの組み合わせでmax-heightありoverflow:auto、問​​題が発生します。

これは、IE8の最終リリースバージョンの公式バグとしても記録されます

回避策はありますか？今のところ、heightの代わりにを使用することにしましmax-heightたが、データが少ない場合に備えて、十分な空きスペースが残ります。

4

8 に答える 8

72

これは、とを含む<pre>コード ブロックを使用してスタック オーバーフローに大きな影響を与えるため、非常に厄介なバグです。max-height:600width:auto

これは、修正されていない IE8 の最終バージョンのバグとして記録されています。

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

非常にハックな CSS の回避策があります。

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

もちろん、他の人が述べたように条件付き CSS ですが、すべてのページ要求で余分な HTML クラフトを提供していることを意味するため、私はそれが嫌いです。

于 2009-05-19T08:34:12.627 に答える
4 
{
overflow:auto
}

div overflow:auto を試す

于 2011-02-11T13:26:05.067 に答える
3

私はこれがRC1の修正されたバグとして記録されているのを見ました。しかし、ハードアサーションレンダリングの失敗を引き起こすと思われるバリエーションを見つけました。ネストされたテーブルにこれら2つのスタイルを含めます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
    .calendarBody
    {
        overflow: scroll;
        max-height: 500px;
    }
    </style>
</head>
<body>
    <table>
    <tbody>
        <tr>
        <td>
            This is a cell in the outer table.
        <div class="calendarBody">
            <table>
                <tbody>
                <tr>
                    <td>
                    This is a cell in the inner table.
                </td>
                    </tr>
            </tbody>
                </table>
        </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
于 2009-03-20T22:15:05.493 に答える
2 
{max-height:200px, Overflow:auto}

Srinivas Tamada のおかげで、上記のコードはうまくいきました。

于 2011-05-03T10:00:08.507 に答える
1

max-heightのみを設定し、オーバーフローは設定しないでください。このように、コンテンツが最大高さを超える場合はスクロールバーが表示され、コンテンツが最大高さを下回る場合は縮小されます。

于 2012-11-01T07:47:06.217 に答える
1

再現するには：

(これにより、ページ全体がクラッシュします。)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:
    
    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                X
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

（これはうまくいきますが...）

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:
    
    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                The quick brown fox
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

（そして、狂ったように、これもそうです。[divにコンテンツがまったくありません。]）

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:
    
    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>
于 2010-10-05T10:27:17.823 に答える
1

同様の状況で、割り当てられたスペースに収まるように js によって設定された maxHeight を持つ pre 要素、幅 100%、オーバーフロー自動。コンテンツが maxHeight よりも短く、横方向にも収まる場合は問題ありません。ウィンドウのサイズを変更してコンテンツが水平方向に収まらなくなると、水平スクロールバーが表示されますが、コンテンツの高さに関係なく、要素の高さがすぐに最大の maxHeight にジャンプします。

Jeff が言及したさまざまな形式の css ハックを試してみましたが、js の不正なパラメーター エラーではないものは見つかりませんでした。

私が見つけることができた最善の方法は、ie8 の毒を選択することでした: maxHeight 制限を削除して、要素を任意の高さにするか (私の場合に最適)、または maxHeight ではなく高さを設定して、コンテンツ自体がはるかに短い。非常に理想的ではありません。ie9 ではおかしな動作はなくなりました。

于 2011-08-18T18:57:37.927 に答える
0

私はこれを見つけました: https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

このメソッドは IE6 で検証されており、IE5 でも動作するはずです。ニーズに合わせて値を変更するだけです (コードは説明ノート付きでコメントされています)。この例では、IE およびすべての標準準拠ブラウザーの最大高さを 333px 1 に設定しています。

* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }

これは私にとって完璧に機能するので、これを共有することにしました。

于 2015-11-17T17:40:20.983 に答える