1

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

在下面的示例中，面板的 bbar 在 IE6 中显示为比它附加到的面板（左对齐）窄 2ems，而在 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

也许您应该尝试强制 bbar 的宽度：

main.getBottomToolbar().setWidth(500)

面板创建后？

但我认为问题在于 bbar 被渲染到div面板的内部，因此不同的浏览器对外部填充的解释不同。

您也可以尝试将paddingbbar 设置为-1em.

于 2008-09-18T16:32:24.673 回答
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'}
        ]
    });

需要使用border: false 来避免双边框。

于 2008-09-19T17:09:05.240 回答