我有一个选择元素，用户可以在其中选择分类和描述。仅在 Chrome 浏览器中，我有一个额外的填充，无法使用 padding:0 或其他 css 标签删除它。Chrome 的屏幕 https://i.stack.imgur.com/m3iIb.png
然而，其他浏览器中的相同元素没有任何填充。请参阅 Firefox 的示例屏幕。来自 Firefox 的屏幕 https://i.stack.imgur.com/PoyXd.png
知道为什么会出现这种情况吗？
谢谢
更新#2根据我自己的经验以及 google 论坛上的用户的经验，这似乎只会影响使用 Windows 8 和 Windows 10 显示器的用户触摸感应屏幕。
（请忽略我之前的更新：Windows 10 和字体缩放！）
看这里：Chrome 支持论坛 - 下拉选项高度 https://productforums.google.com/forum/#!topic/chrome/IO4USajnHOQ;context-place=topicsearchin/chrome/select%2420option%2420padding
外观 css 没有做任何修复它的事情（请注意，如果将外观样式放在选择元素上，那么下拉箭头就会消失）
这是一些示例代码 - 仅发生在我的触摸感应笔记本电脑上，并且仅在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
