1

ExtJSフレームワークを使用したIE6で表示の不具合が発生しました。-うまくいけば、誰かが私を正しい方向に向けることができます。

次の例では、パネルのbbarは、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>
4

2 に答える 2

1

Maybe you should try to force the width of the bbar:

main.getBottomToolbar().setWidth(500)

right after Panel creation?

But I think the problem is that bbar is rendered into inner div of the panel, so different browsers interpret outer padding differently.

Also you can try to set padding of the bbar to -1em.

于 2008-09-18T16:32:24.673 に答える
1

この問題は、カスタム 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'}
        ]
    });

二重境界線を避けるために、border: false が必要です。

于 2008-09-19T17:09:05.240 に答える