chrome中选择选项元素中的额外填充答案

【问题标题】：Extra padding in select option element in chromechrome中选择选项元素中的额外填充
【发布时间】：2018-01-08 19:33:43
【问题描述】：

我有一个选择元素，可以让用户选择分类和描述。仅在 chrome 浏览器中，我有一个额外的填充，我无法使用 padding:0 或其他 css 标签删除。 Screen from Chrome

但是，其他浏览器中的相同元素没有任何填充。请参阅 firefox 的示例屏幕。Screen from Firefox

知道为什么会这样吗？

谢谢

【问题讨论】：

你能提供你的代码吗？
请在您的问题中发布minimal reproducible example。图片很好，但我们更喜欢代码。
只有在特定情况下才能验证问题（请参阅下面的答案）。

标签： css select padding

【解决方案1】：

更新 #2 根据我自己和谷歌论坛上的用户的经验，这似乎只会影响使用 touch-sensitive 屏幕的 Windows 8 和 Windows 10 显示器的用户。（请忽略我之前的更新：Windows 10 和字体缩放！）

请看这里：Chrome Support Forum - Dropdown Option Height

外观 css 无法修复它（请注意，如果您将外观样式放在 select 元素上，那么下拉箭头会消失）

这里有一些示例代码 - 仅在我的触敏笔记本电脑上使用，并且仅在 Chrome 中使用。我所有的其他机器都正确渲染。 IE 和 firefox 在所有机器上都能正确渲染。

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html, page, body 
        { 
            padding:0; border:0; margin:0;
            font-family:Tahoma, Verdana, sans-serif;
            font-size:12px;
        }
        select {
            padding: 0px 8px;
        }
        option {
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
        }
    </style>
</head>
<body>
    <div style="padding:20px;background-color:#887b93">
        <select name="vendorId" id="vendorId">
            <option value="">--- Select Vendor ---</option>
            <option value="86">Alexandra</option>
            <option value="5">Alix</option>
            <option value="73">Anna</option>
            <option value="19">Anne</option>
            <option value="60">Avant</option>
            <option value="65">Blue</option>
            <option value="84">Blush</option>
            <option value="21">Carol</option>
            <option value="89">Christos</option>
            <option value="43">Claire</option>
            <option value="25">Cynthia</option>
            <option value="54">Dauphines</option>
            <option value="22">Delphine</option>
        </select>
    </div>
</body>
</html>

【讨论】：

你是说bug只影响Win10还是修复只影响Win10？ Windows 8.1 也受到强制附加填充的影响。
确认这发生在 Windows 10 中，但仅适用于触摸屏机器。此外，确认似乎没有 CSS 会影响（修复）该问题。
刚刚开始在我的桌面上发生 - Windows 10 1809，非触摸屏。

【解决方案2】：

这可能有助于重置选择元素的所有浏览器特定样式：

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

【讨论】：

对这个问题没有影响。