javascript - ExtJS 内联宽度导致 firefox 中的宽度错误

Question

我们正在使用 ExtJS 4.1.2 创建一个面板，其中的工具栏停靠在顶部。我们已经覆盖了很多样式来实现我们想要的外观和感觉。尽管我们尽了最大努力来对齐和调整，但我们在 Firefox 中遇到了一个奇怪的问题，即显示此面板的页面的默认宽度为 20000 像素。我相信有问题的元素是 ExtJS 使用单个“x-box-inner”类创建的一些内部组件。在 dom 浏览器 View 中我可以看到

<div id="mylist" class="x-panel listpanel x-panel-default">    
 <div id="toolBar###(ExtJSid)" class="x-toolbar-docked-top x-toolbarhttp://i.stack.imgur.com/ddvdF.png x-toolbar-default  x-docked x-docked-top ..." style="width: 735px;..." ...>
  <div id="anotherXtJSid" class="x-box-inner " style="width: 735px; ..." ...>
    <div id="anotherExtJSid" style="width:20000;..." (no class)>
...

如果我将鼠标悬停在该元素上，我会看到 如果在浏览器 DOM 资源管理器中我将 20000px 宽度编辑为“自动”，则 firefox 窗口滚动条消失，并且显示大小正确。

我试图在定义面板的 scss 中解决该级别及以下级别的 div 的覆盖宽度为“width:auto”的问题:

...
.listpanel {
  overflow: visible;
  background: none;
  border: none;

  ...
  .x-toolbar-docked-top {
    overflow: visible;

    .x-box-inner + div { // added + div
      overflow: visible;
      width: auto; // added width here.
    }
  }
...
}

创建 ExtJS 面板时使用此类:

Ext.define('List', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mylist',
     ... // no width defined. It messes up all components within panel.
    height: 750,
    frame: false,
    cls: 'listpanel',
    bubbleEvents: [
    ...
    ],

 ...

    initComponent: function () {
        this.callParent(arguments);
        this.add({
            xtype: 'listbody',
            ownerCt: this,
        ...
     },
...

x-box-inner 上的 width:auto 和 + div 似乎固定了宽度，尽管我仍然可以看到 ExtJS在 DOM 检查器中使用 width:20000px 的元素。但是，这似乎是任意的，这打破了 overfow: visible —— 当用户单击下拉按钮时，面板的工具栏下拉弹出窗口之一现在消失在面板下方。

是否有一些(其他)方法来强制这个神秘的 ExtJS 元素的宽度？

Answer 1

因此，通过进一步的实验和我同事的一些建议，答案就在

1. 使用 width: 100% 而不是 width: auto
2. 使用 > 而不是 + 来影响所有 child 的宽度<​​/li>
3. 为没有 > div 的 x-box-inner 制定另一个规则，只是为了控制 overflow: visible。
4. 制定规则 !important，这样它们就不会被其他样式覆盖。

样式表保持不变，但有以下 x-box-inner 规则更改: ...

     .x-box-inner > div {
       width: 100% !important;
     }

     x.box-inner {
         overflow: visible !important;
     }
...