溢出-x CSS 不适用于 Firefox/IE

Posted 2023-03-08

【中文标题】溢出-x CSS 不适用于 Firefox/IE

【英文标题】：overflow-x CSS not working with firefox/IE

【发布时间】：2016-12-09 13:48:21

【问题描述】：

我有以下代码

.textareaclasswide border:solid 1px #7f9db9; width:460px; height:150px;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;overflow-x:auto;  




</f:verbatim>
<h:selectManyListbox id="availableProducts" value="#addSubscriptionsBean.selAvailableProducts" styleClass="textareaclasswide">
<s:selectItems value="#addSubscriptionsBean.availableProducts"var="product" itemLabel="#product.productDisplayName" itemValue="#product.productCode" />
</h:selectManyListbox>
<f:verbatim>

我正在使用 selectManyListbox ，垂直滚动条工作正常，但如果我在 css 中包含溢出-x 用于水平滚动条，它在 chrome 中工作但在 IE/FIREFOX 中不工作

请帮忙

【问题讨论】：

您需要包含足够的代码才能在此处重现您的问题。仅仅一个类的 CSS 是不够的。

【参考方案1】：

您需要添加white-space: nowrap; 才能启用水平滚动。

.textareaclasswide 
  white-space: nowrap;
  border:solid 1px #7f9db9; 
  width:460px; 
  height:150px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  overflow-x:auto;  

<textarea rows="4" class="textareaclasswide"  cols="10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, neque vel posuere pellentesque, dui orci vehicula erat, in dignissim dolor metus et est. Aliquam erat volutpat. Donec iaculis faucibus dictum. Sed faucibus dui vitae euismod gravida. Nullam quis est molestie, imperdiet augue vitae, ultricies lorem. Donec consectetur scelerisque nisi, vel dictum enim volutpat id. In consectetur rutrum tempor. Curabitur volutpat, leo a vestibulum facilisis, sapien lectus lacinia ante, ac volutpat dui nibh sed erat.

Etiam vitae lacus in libero consectetur bibendum. Curabitur tincidunt arcu in massa ultrices imperdiet. Phasellus tristique velit vel auctor egestas. Nulla facilisi. Sed auctor turpis at dui consectetur lacinia ut quis ante. Aliquam non nisl est. Maecenas dapibus lectus at libero egestas, ac semper arcu facilisis. Aliquam auctor ex at erat rutrum, vel suscipit felis eleifend. Mauris lobortis diam quis est malesuada, eget placerat turpis sagittis.
</textarea>

【讨论】：

感谢您的快速回复，但这对我不起作用

你能创建一个 jsFidlle 或其他重现“不工作”行为的东西吗？那我也许可以帮你。