css - 固定位置在不同的浏览器中不行，如何在Ext.Panel中制作一个带有列的表格？

Question

我正在尝试弄清楚如何在两个不同的浏览器上显示菜单。现在，在 Chrome 上使用固定位置是完美的(仅针对小型 Ext Panel 固定，而不是所有页面不用担心)。

问题是它无法在 FireFox 中正确显示( slider 在 FireFox 中有太多错误)。我试图让它们 float :对，但它根本不起作用。第一个是完美的，其他的根本没有任何意义。

我尝试使用表格，但我似乎无法理解这种技术。我制作了一个 2 列的表格，但我没有。

这是 Linux(左)和 Chrome(右)面板的图片。面板是其中带有 slider 的面板。您可以看到，在 FireFox 上， slider 太长了，因为我现在使用的是固定定位。

你能给我点主意吗？表格布局是个好主意吗？我是否应该稍微降低 slider 的宽度以使它们适合两者？有办法吗？

或者最好问:有没有办法询问我的大左面板(所有左边的东西)以确保所有东西都适合那里？因为如果我全屏打开页面，左侧面板的大小是正确的，即使我调整得更小也没有任何问题......

非常感谢大家。

PS:这是我面板的代码(全部)(缩进了很多，看右边):

new Ext.Panel({
                                                                                                title: '<center>' + extjs_gui_products_tab + '</center>',
                                                                                                id: 'products_tab',
                                                                                                xtype: 'checkboxgroup',
                                                                                                padding: 3,
                                                                                                cls: 'ProductLabel', 
                                                                                                items: [  

                                                                                                            //TOFINISH
                                                                                                            new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(analysesSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_analyses)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }),                                                             
                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_analyses_checkbox_title,
                                                                                                                                        id: 'analyses_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_analyses_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_analyses_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: addAnalyseLayer
                                                                                                                                        }
                                                                                                                                    }),
                                                                                                            new GeoExt.LayerOpacitySlider({
                                                                                                                                            width: 125,
                                                                                                                                            value: 73,
                                                                                                                                            layer: map.getLayersByName(openlayers_vector_layer_observations)[0],
                                                                                                                                            aggressive: true, 
                                                                                                                                            style: 'position:absolute; left:135px;'
                                                                                                                                        }),   

                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_observations_checkbox_title,
                                                                                                                                        id: 'observations_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_observations_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_observations_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: loadGeoJSON
                                                                                                                                        }
                                                                                                                                    }),";

                                                                                                        //this condition controls whether or not the radar button is included in the javascript of the GUI
                                                                                                        if($radarButton==="true"){
                                                                                                                                echo "
                                                                                                                                //TOFINISH
                                                                                                                                new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(radarSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_radar)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }),  
                                                                                                                                new Ext.form.Checkbox({
                                                                                                                                                            title: extjs_gui_products_radar_checkbox_title,
                                                                                                                                                            id: 'radar_composite_checkbox_extjs',
                                                                                                                                                            boxLabel: extjs_gui_products_radar_checkbox_label,
                                                                                                                                                            inputValue: extjs_gui_products_radar_checkbox_label,
                                                                                                                                                            listeners: {
                                                                                                                                                                check: addRadarLayer
                                                                                                                                                            }
                                                                                                                                                        }),";
                                                                                                        }
                                                //this condition controls whether or not the radar button is included in the javascript of the GUI
                                                if($forecastButton==="true"){
                                                                                echo "                                                                                                                          
                                                                                                            //TOFINISH
                                                                                                            new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(forecastSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_forecast)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }), 
                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_forecast_checkbox_title,
                                                                                                                                        id: 'forecast_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_forecast_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_forecast_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: addForecastLayer
                                                                                                                                        }
                                                                                                                                    }),";
                                                }
                                                                                                        //this condition controls whether or not the summation button is included in the javascript of the GUI
                                                                                                        if($sumButton==="true"){

                                                                                                                                echo "
                                                                                                                                //TOFINISH
                                                                                                                                new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(summationSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_summation)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }), 
                                                                                                                                new Ext.form.Checkbox({
                                                                                                                                                            title: extjs_gui_products_sum_checkbox_title,
                                                                                                                                                            id: 'sum_checkbox_extjs',
                                                                                                                                                            boxLabel: extjs_gui_products_sum_checkbox_label,
                                                                                                                                                            inputValue: extjs_gui_products_sum_checkbox_label,
                                                                                                                                                            listeners: {
                                                                                                                                                                check: addSummationLayer
                                                                                                                                                            }
                                                                                                                                                        })";

                                                                                                        }

                                                                                echo "
                                                                                                ]
                                                                            }),

Answer 1

看起来它与 slider 宽度的关系不大，而与父面板的关系更大。

您的代码在设置父面板宽度的地方没有任何内容。

试试看，看看会发生什么。

(尝试稍微清理一下代码 - 很难看出发生了什么，因为它向右缩进了那么远)。