水平滚动条不适用于safari

Question

我正在使用以下html来显示一个选择框。 我想显示具有固定宽度的选择框，如果有任何选项更长，我希望看到滚动条。 以下适用于chrome和firefox但它在safari中不起作用。

有任何想法吗？

<!DOCTYPE html>
    <html>
       <head>
          <style type="text/css">
             select.dualList {
             width:100%;
             height:300px;
             overflow-x: auto;
             }
          </style>
       </head>
       <body>
          <table>
             <tr >
                <td style="width:100px">
                   <select multiple="multiple" class="dualList" id="sourceList" >
                      <option value="item11">Item 1 This is my item 1. It should scroll</option>
                      <option value="item22">Item 2fsdsfsdf asdf asfsdas</option>
                      <option value="item33">Item 3</option>
                      <option value="item44">Item 4</option>
                      <option value="item55">Item 5</option>
                   </select>
                </td>
             </tr>
          </table>
       </body>
    </html>

Answer 1

首先，它在我的Firefox 47（Windows 10 x86_64）中不起作用。

其次，尽管我们中的许多人都希望只使用CSS规则来呈现像select元素这样的东西，但事实并非如此，不同的浏览器会以不同的方式呈现它们 - 对于如何select元素没有跨浏览器要求应准确呈现。

这样做的缺点是你不知道它的外观，所以你根本不能指望对它有精确的控制。 试图像这样控制它只会导致挫败感，而且是徒劳的。 我建议您将控件留在浏览器用户手中 - 请放心，它将以他们熟悉的方式呈现。 如果您的选项文本太长，浏览器将以某种方式容纳它 - 它通常水平拉伸列表本身，以便人们可以阅读整个文本。 你可以从中得到的教训是没有太多的文字。

如果你要求人们选择句子，也许单选按钮（ <input type="radio"> ）是个更好的主意？

水平滚动条不适用于safari

问题描述

1 个解决方案

解决方案1
0 2016-06-24 16:07:34

水平滚动条不适用于safari

问题描述

1 个解决方案

解决方案1 0 2016-06-24 16:07:34

解决方案1
0 2016-06-24 16:07:34