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

Question

我有以下代码

.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 中不工作

请帮忙

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