css - 在 IE 浏览器中选择标签的选项之间添加空格

Question

我想在 IE 浏览器中选择元素的 2 个选项之间添加一个空格。我的代码在 Firefox 和 Chrome 中工作，使用我为 select 元素编写的 CSS。但是，这些样式不适用于 IE。这是选择元素的 CSS，如下所示：

.branchDropdown { border: 1px solid #999999; width: 155px; } 

对于选项元素：

.branchDropdown option { cursor: pointer; margin-top: 10px; }

Answer 1

您不能<option>在 Internet Explorer 中为大多数属性的元素设置样式。它们继承了 Windows 操作系统的样式，但背景和字体颜色除外。这是来自 MSDN 页面的引用<option>：

除了 background-color 和 color 之外，通过样式对象为选项元素应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个包含选择元素的样式设置。

http://msdn.microsoft.com/en-us/library/ie/ms535877(v=vs.85).aspx

要创建一致的外观，您唯一的其他选择是使用 JavaScript 呈现自定义元素，以替换页面上的默认选择元素。

Answer 2

option元素中的select元素不能通过 CSS 直接访问，您需要一个 javascript 替换来以这种方式自定义选择元素。请参阅这个有趣的博客条目。另一种 js 替代品是select2。