我有一个看起来应该很简单解决的问题,就是使用
下面是HTML代码片段:
这里是不同渲染效果的图片:
Firefox渲染
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渲染 - 损坏的项目](https://istack.dev59.com/EsywL.webp)
IE11渲染
现在,这是一个可重复使用的列表生成代码模块的一部分,用于模拟自动完成功能的下拉列表。外部两个DIV(helperList,helperListItem)是自动生成的,我无法更改它们。我可以控制放入每个helperListItem DIV中的项的呈现方式。这个特定的项不同寻常,因为它包含两个信息,并且意图是将第二个部分("Data X Special Info")右对齐,从而呈现出两列的外观。
机械上来说,在呈现带有垂直滚动条的列表方面,它在IE11和FF中都能正常工作。然而,当FF呈现列表并使框的宽度与最长的项匹配,但随后在列表内插入垂直滚动条时,它会重新排列列表内容,并在列表中最长的项处或附近打破项。相反,IE将滚动条放在DIV之外,因此在所有情况下正确地呈现项目。
我需要停止在FF中对项目的换行/断行。 我已经尝试过的方法 - 我承认有些显然是不切实际的,而且坦白说,我现在确信我忽略了一个更简单的解决方案(并且我的眼球在这一点上变成了茶包):- 使用display: table-cell呈现每个项目
- 在项目末尾(然后是中间)添加一个空的15px
- 当列表宽度和滚动宽度不同时,在框中编程添加padding-right,这可能只发生在一个实例中
- 消除弹性容器/列设置
- 将'white-space: nowrap'添加到项目和span中
在以下链接中提供了一个有效的演示程序,说明在两个不同的浏览器中呈现时的差异:
https://jsfiddle.net/ykv3tu41/1/
如果可能的话,我该如何防止FireFox将垂直滚动条放置在列表DIV内,从而导致项目断行?
我认为这里发布的问题正在处理一个非常类似(如果不是完全相同的)问题,但它没有答案。
编辑:我开始认为这可能是一个flexbox问题,在这里有描述。