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

我剛剛在ExtJS框架中遇到了IE6的顯示故障。 - 希望有人能指出我正確的方向。IE 6中Ext.Panel bbar的寬度問題

在以下示例中，面板的bbar顯示爲比它所連接的面板（左對齊）窄2個字符，在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>

來源

2008-09-18 Matt Sheppard

問題來自自定義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'} 
     ] 
    });

邊框：假是需要避免雙重接壤。

來源

2008-09-19 17:09:05 tsg

也許你應該嘗試強行BBAR的寬度：

main.getBottomToolbar（）setWidth（500）。

面板創建後？

但我認爲問題是，bbar被渲染到面板的內部div，所以不同的瀏覽器以不同的方式解釋外部填充。

此外，您可以嘗試將bbar的填充設置爲-1em。

來源

2008-09-18 16:32:24 Thevs

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

回答

相關問題