html - 克服 FireFox/IE 垂直滚动条渲染差异

Question

我有一个应该很容易解决的问题，在 DIV 上用 overflow-y: auto 呈现垂直滚动条，但在 IE 和 IE 之间呈现不同火狐。简而言之，在 IE 中，滚动条出现在 DIV 的外部，而在 FF 中，它呈现在 DIV的内部>。当元素接近列表中的最长项时，这会导致 FF 中的 DIV 中的元素出现不必要的换行(这反过来又会增加第一个 DIV 的宽度)地方)。

这是 HTML 的片段

<div class='helperList'>
   <div class='helperListItem'>
      <span>
        Sample Data Item 1
        <span class='helperItemExtraData'>
            Data 1 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
</div>

helperList 的相关 CSS 是:

div.helperList{
   display: flex;
   flex-direction: column;
   width: auto;
   overflow-y: auto;
   overflow-x: hidden;
   height: 300px;
}

对于 helperItemExtraData:

span.helperItemExtraData{
    float: right;
}

这是不同效果图的图片:

Firefox 渲染

IE11渲染

现在，这是列表生成代码的可重用模块的一部分，该代码模拟自动完成功能的下拉列表。外面的两个 DIV(helperList、helperListItem)是自动生成的，我无法更改它们。我可以控制进入每个 helperListItem DIV 的元素的呈现。这个特殊元素的不寻常之处在于它包含两条信息，目的是让第二条信息(“Data X Special Info”)右对齐，呈现两列的外观。

从机制上讲，就渲染带有垂直滚动条的列表而言，它在 IE11 和 FF 中都能正常工作。然而，当 FF 呈现列表，并使框的宽度与最长的元素匹配时，然后将垂直滚动条插入列表中，然后重排列表内容并在列表中最长元素的长度处或附近中断元素。相反，IE 将滚动条放在 DIV 外部，因此在所有情况下都能正确呈现元素。

我需要停止在 FF 中拆开/包装元素。到目前为止我已经尝试过的 - 我会预先承认其中一些显然是可以达到的，坦率地说，我正处于我确信我忽略了一个更简单的解决方案的地步(我的眼球正在转向此时的茶包):

1. 使用 display: table-cell 呈现每个元素
2. 在元素的末尾(然后到中间)添加一个 15px 的空白
3. 当列表的宽度和滚动宽度不同时，以编程方式向框添加 padding-right，这大概只发生过一次
4. 消除 flex 容器/列设置
5. 向元素和跨度添加“white-space: nowrap”

可在以下位置找到一个工作 fiddle ，它说明了在两种不同浏览器中呈现时的差异:

https://jsfiddle.net/ykv3tu41/1/

如果可能的话，我怎样才能阻止 FireFox 将垂直滚动条放在列表 DIV 中，从而导致破坏元素？

我相信发布的问题 here正在处理一个非常相似(如果不完全相同？)的问题，但没有答案。

编辑:我开始认为这可能是描述为 here 的 flexbox 问题.

Answer 1

对于跨浏览器支持，将此添加到您的代码中:

div.helperListItem > span {
  display: flex;
  white-space: nowrap;
}

revised fiddle

div.testContainer {
  width: 500px;
  height: 500px;
}

div.helperList {
  position: absolute;
  width: auto;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

div.helperListItem>span {
  display: flex;
  white-space: nowrap;
}

<div class='testContainer'>

  <div class='helperList'>
    <div class='helperListItem'>
      <span>
        Sample Data Item 1
        <span class='helperItemExtraData'>
            Data 1 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
    <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
    </div>
  </div>
</div>