Ext.TabPanelのレイアウトとIE6

Ext JSで、TabPanelの幅をコンテナのサイズに合わせて自動的に伸縮させたい場合、defaultsプロパティでautoWidthをtrueにすれば良い（TabPanel自身のautoWidthではないので注意が必要）。

new Ext.TabPanel({
    renderTo: 'tab-panel',
    activeTab: 0,
    defaults: { autoWidth: true, autoHeight: true },
    items: [
        { contentEl: 'tab1', title: 'Foo' },
        { contentEl: 'tab2', title: 'Bar' }
    ]
});

問題になるのは、このTabPanelを<table>の中に入れたとき。IE6で表示すると、パネル幅がウィンドウ幅を超えて極端に長くなってしまう（IE6以外のブラウザでは正常に表示できる）。

色々と調べたところ、Extの以下のCSSが原因と判明。

ul.x-tab-strip{display:block;width:5000px;zoom:1;}

以下のようにwidth指定を取り除くと、IE6でもうまく表示されるようになった。

ul.x-tab-strip{display:block;zoom:1;}