Question

对于DIV overflow-y: auto上的垂直滚动条渲染，我有一个简单易解决的问题，但IE和FireFox之间的渲染方式不同。简而言之，在IE中，滚动条显示在外面 DIV，而在FF中，它在 DIV内呈现。当项目接近列表中最长的项目时（这反过来驱动DIV的宽度），这会导致FF中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的项目的呈现。这个特殊项目的不寻常之处在于它包含两条信息，目的是使第二条（“数据X特殊信息”）右对齐，给出两列的外观。

在机械方面，就使用垂直滚动条呈现列表而言，它在IE11和FF中都能正常工作。但是，当FF渲染列表，并使框的宽度与最长项匹配时，然后插入列表中的垂直滚动条，然后重新排列列表内容和中断项目在列表中最长项目的长度或附近。相反，IE将滚动条放在 DIV之外，从而在所有情况下正确呈现项目。

我需要停止破坏/包装FF中的项目。到目前为止我已经尝试了 - 而且我会在前面承认其中一些显然达到了，坦率地说，我确定我忽略了一个更简单的解决方案（我的眼球正转向此时的茶包）：

使用display：table-cell
呈现每个项目
在项目的最后（然后是中间）添加空白，15px

当列表的宽度和滚动宽度不同时，以编程方式向框中添加填充权限，这可能只发生在一个实例中

消除弹性容器/色谱柱设置

将“white-space：nowrap”添加到项目和范围

一个工作小提琴，用于说明在两种不同浏览器中呈现时的差异：

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

如果可能，我怎么能阻止FireFox将该垂直滚动条放在列表DIV中，从而导致破坏项目？

我认为发布here的问题是处理一个非常相似（如果不相同？）的问题，但它没有答案。

编辑：我开始认为此可能是here所描述的Flexbox问题。

Answer 1

对于跨浏览器支持，请将其添加到您的代码中：

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

revised fiddle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这无疑是相当hacky，但您可以通过添加具有calc()函数的类来以编程方式添加填充。

添加CSS

span.helperItemExtraData{
    float: right;
    padding-right:16px; /* new */
}
.scrollPadding{
    width: calc(100% + 6px)
}

然后，当您确定存在滚动时，

<强> JS

// Logic to determine when a scrollbar is present. placeholder: if(1==1)

if(1==1){
    var listItems = document.getElementsByClassName('helperListItem');
    for(var i=0; i<listItems.length; i++){
      listItems[i].classList.add("scrollPadding");
    }
}

Updated Fiddle

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

2 个答案: