Question

当我有一个广泛的选择列表时，与Mac相比，Windows操作系统上Chrome（或任何其他浏览器）的宽度更宽。有没有一种简单的方法来实现一致的宽度？

例如，如果您在Windows和Mac上打开http://jsfiddle.net/8Rxsc/5/，则窗口中选择框的宽度为295像素，而在Mac上则为278像素。

<body>
    <select>
        <option selected>Select One</option>
    <option>One </option>
    <option>Two Two</option>
    <option>Three Three Three </option>
    <option>Four Four Four Four </option>
    <option>Five Five Five Five Five </option>
    <option>Six Six Six Six Six Six </option>
    <option>Seven Seven Seven Seven Seven Seven Seven</option>
    <option>Eight Eight Eight Eight Eight Eight Eight Eight </option>
    <option>Nine Nine Nine Nine Nine Nine Nine Nine Nine </option>
    <option>Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten </option>
    </select>
</body>

Chrome browser On Windows

Chrome browser on mac

Answer 1

通过告诉正确的元素你想要它是什么width来增加一致的宽度，比如说：

select {
  width: 800px;
}

您的小提琴已更新：http://jsfiddle.net/8Rxsc/3/

Answer 2

您可以使用css设置选择框的宽度，使其在所有浏览器中始终保持相同。

select {width:295px;}

窗口中<select>列表的宽度比mac </select>宽

2 个答案: