logo标签列表

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

htmlcssinternet-explorerfirefoxflexbox
3
我有一个看起来应该很简单解决的问题，就是使用overflow-y: auto属性的DIV在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渲染 - 损坏的项目 Firefox渲染

IE11 rendering - no broken items

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. 消除弹性容器/列设置
  5. 将'white-space: nowrap'添加到项目和span中

在以下链接中提供了一个有效的演示程序，说明在两个不同的浏览器中呈现时的差异：

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

如果可能的话，我该如何防止FireFox将垂直滚动条放置在列表DIV内，从而导致项目断行？

我认为这里发布的问题正在处理一个非常类似（如果不是完全相同的）问题，但它没有答案。

编辑：我开始认为这可能是一个flexbox问题，在这里有描述。

2个回答
1

为了实现跨浏览器支持，请将以下代码添加到您的代码中：

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

修订版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>

1
这种方法有点取巧，但您可以使用带有calc()函数的类来自动添加填充。 添加CSS 
span.helperItemExtraData{
    float: right;
    padding-right:16px; /* new */
}
.scrollPadding{
    width: calc(100% + 6px)
}

当您确定存在滚动条时，接下来需要进行的操作是：

JavaScript

// 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");
    }
}

更新后的 Fiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接