Question

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

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

知道为什么会这样吗？

谢谢

Answer 1

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

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

Answer 2

更新＃2 根据我自己的经验和谷歌论坛用户的经验，这似乎只会影响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>

chrome

2 个答案: