IE 6 中 Ext.Panel bbar 的寬度問題

Question

我剛剛在使用 ExtJS 框架的 IE6 中遇到了顯示故障。 - 希望有人能指出我正確的方向。

在以下示例中，面板的 bbar 在 IE6 中顯示為比它所連接的面板窄 2em（左對齊），而在 Firefox 中，它顯示為與面板相同的寬度。

誰能建議如何解決這個問題？

我似乎可以通過以 em 為單位指定面板的寬度或以像素為單位的填充來解決問題，但我認為它應該可以像下面那樣工作。

<!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>

Answer 1

問題來自自定義 bodyStyle 填充。 它使面板內容變大，但不會使工具欄變大。

一種可能的解決方案是進一步嵌套一個 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 以避免雙重邊框。

Answer 2

也許你應該嘗試強制 bbar 的寬度：

main.getBottomToolbar().setWidth(500)

在面板創建之后？

但我認為問題在於 bbar 被渲染到面板的內部div中，因此不同的瀏覽器對外部填充的解釋不同。

您也可以嘗試將 bbar 的padding設置為-1em 。

IE 6 中 Ext.Panel bbar 的寬度問題

問題描述

2 個解決方案

解決方案1
1 已采納 2008-09-19 17:09:05

解決方案2
1 2008-09-18 16:32:24

IE 6 中 Ext.Panel bbar 的寬度問題

問題描述

2 個解決方案

解決方案1 1 已采納 2008-09-19 17:09:05

解決方案2 1 2008-09-18 16:32:24

解決方案1
1 已采納 2008-09-19 17:09:05

解決方案2
1 2008-09-18 16:32:24