Chrome中的select选项元素中的额外填充 [英] Extra padding in select option element in chrome
问题描述
我有一个select元素，使用户可以选择分类和描述.仅在chrome浏览器中，我有一个额外的填充，无法使用padding:0或其他css标签删除. Chrome屏幕
I have a select element where I enable users to choose the classification and description. In chrome browser only, I have an extra padding which I am not able remove with padding:0 or with other css tags. Screen from Chrome
但是，其他浏览器中的同一元素没有任何填充.请参阅来自firefox的示例屏幕.来自Firefox的屏幕
However, the same element in other browsers does not have any padding. See example screen from firefox.Screen from Firefox
知道为什么会这样吗?
谢谢
推荐答案
更新#2 根据我自己的经验以及Google论坛上的用户的经验，这似乎只影响具有触摸屏屏幕的Windows 8和Windows 10上的用户. (请忽略我以前的更新版本:Windows 10和字体缩放！)
UPDATE #2 Based on my own experience, and those of users on the google forums, this only seems to affect users on Windows 8 and Windows 10 displays with touch-sensitive screens. (Please ignore my previous update re: Windows 10 and font-scaling!)
请参阅此处:外观css不能对其进行任何修复(请注意，如果将外观样式放在select元素上，则下拉箭头会消失)
The appearance css does nothing to fix it (note that if you put the appearance styles on the select element, then the drop-arrow disappears)
这里有一些示例代码-仅在我的触敏笔记本电脑上发生，并且仅在Chrome中发生.我所有其他机器都正确渲染. IE和firefox在所有计算机上均可正确呈现.
Here's some sample code - happens only on my touch-sensitive laptop, and only in Chrome. All of my other machines render correctly. IE and firefox render correctly in all machines.
<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中的select选项元素中的额外填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
