IE 6 の Ext.Panel Bbar の幅の問題

StackOverflow https://stackoverflow.com/questions/90181

質問

ExtJS フレームワークを使用した IE6 で表示の不具合が発生しました。- 誰かが私を正しい方向に導いてくれることを願っています。

次の例では、パネルのバーは、IE6 では接続されているパネルよりも 2em 狭く表示されます (左揃えです)。一方、Firefox ではパネルと同じ幅で表示されます。

誰かがこれを修正する方法を提案できますか?

パネルの幅をemsで指定するか、パディングをピクセルで指定することで回避できるようですが、以下のように機能すると予想されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){        
        var main = new Ext.Panel({
            renderTo: 'content',
            bodyStyle: 'padding: 1em;',
            width: 500,
            html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
            bbar: [
                    "->",
                {id: "continue", text: 'Continue'}
            ]
        });
    });

    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
役に立ちましたか？

解決

この問題は、カスタムの bodyStyle パディングに起因します。パネルのコンテンツは大きくなりますが、ツールバーは大きくなりません。

考えられる解決策の 1 つは、次のように Ext パネルをさらにネストすることです。

    var main = new Ext.Panel({
        renderTo: 'content',
        width: 500,
        items: {
            bodyStyle: 'padding: 1em;',
            border: false,
            html: "Now alignment is fine."
        },
        bbar: [
                "->",
            {id: "continue", text: 'Continue'}
        ]
    });

境界線:二重境界線を避けるには false が必要です。

他のヒント

おそらく、bbar の幅を強制的に試してみるべきかもしれません。

main.getBottomToolbar().setWidth(500)

パネル作成直後ですか？

しかし、問題は、bbar が内部にレンダリングされていることだと思います div したがって、ブラウザごとに外側のパディングの解釈が異なります。

また、設定してみることもできます padding バーバーの -1em.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top