Windows 中 <select> 列表的宽度比 mac 宽答案

【问题标题】：Width of <select> list in windows wider than macWindows 中 <select> 列表的宽度比 mac 宽
【发布时间】：2014-05-15 16:28:42
【问题描述】：

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

例如，如果你在windows和mac上打开http://jsfiddle.net/8Rxsc/5/，windows中选择框的宽度是295px，而在mac上是278px。

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

【问题讨论】：

标签： html css windows macos google-chrome

【解决方案1】：

通过告诉正确的元素你想要什么width来添加一致的宽度，例如：

select {
  width: 800px;
}

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

【讨论】：

【解决方案2】：

您可以使用 css 设置选择框的宽度，这样它在所有浏览器上总是相同的。

select {width:295px;}

【讨论】：

谢谢@DD0UG ... width 和 max-width 是我查看的两个属性；但是，这样做的问题是，如果我们有更长的选项，它们会在选择时被截断。我正在寻找一种解决方案，其中宽度在操作系统之间是相同的，而不必限制大小。