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

【问题标题】：Adding space between options of select tag in IE browser在 IE 浏览器中选择标签的选项之间添加空格
【发布时间】：2013-03-14 19:58:41
【问题描述】：

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

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

对于 option 元素：

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

【问题讨论】：

【解决方案1】：

select 元素中的option 元素无法通过 CSS 直接访问，您需要替换 javascript 来以这种方式自定义选择元素。看到这个有趣的blog entry。另一种 js 替代品是 select2。

【讨论】：

【解决方案2】：

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

除了背景颜色和颜色之外，通过选项元素的样式对象应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个选择元素的样式设置。

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

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

【讨论】：