IE 6 中 Ext.Panel bbar 的宽度问题
-
01-07-2019 - |
题
我刚刚在使用 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>
解决方案
问题来自自定义的 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 以避免双重边框。
其他提示
也许你应该尝试强制 bbar 的宽度:
main.getBottomToolbar().setWidth(500)
面板创建后立即?
但我认为问题在于 bbar 被渲染成内部 div
面板的内部填充,因此不同的浏览器对外部填充的解释不同。
您也可以尝试设置 padding
的 bbar 到 -1em
.
不隶属于 StackOverflow