我可以在网页的选择列表中使用等宽字体吗？答案

【问题标题】：Can I use monospace fonts in a selection list on my web page?我可以在网页的选择列表中使用等宽字体吗？
【发布时间】：2012-02-23 17:43:04
【问题描述】：

我希望我的网页上的选择列表中的条目以等宽字体显示。我尝试编写以下 HTML。

<p style='font-family:"Andale Mono", "Monotype.com", monospace;'>

    The quick brown fox jumped over the lazy dogs.

    <select multiple="multiple">
      <option value='1'>Option 1</option>
      <option value='2'>Option 2</option>
    </select>
</p>

结果是“快速...”显示为等宽，但选项不是。是是否也可以使选项以等宽字体显示？

更新：我发现这个问题似乎源于我的选择元素位于 jQuery-UI 选项卡 div 中。

【问题讨论】：

标签： html jquery-ui jquery-ui-tabs monospace

【解决方案1】：

在你的 CSS 中这有什么问题？

option {
  font-family: "Andale Mono", "Monotype.com", monospace;
}

【讨论】：

我刚刚将您的建议复制到我的 CSS 中，但它似乎不起作用:-(
我在页面上放入了我的内联 CSS（已经有一些工作定义）。
我也尝试将 CSS 直接放在选项上，但这似乎也不起作用。顺便说一句，我正在用 IE7 对此进行测试。该页面必须在 IE7 中运行。
实际上，当我将您的解决方案放入 @zooted jsfiddle 时，在 Firefox 中查看时效果很好。这似乎是 IE7 的问题。

【解决方案2】：

select {
  font-family: "Andale Mono", "Monotype.com", monospace;
}

示例：http://jsfiddle.net/LkJfp/

我不认为你可以在 IE7 中这样做：http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/#ie7-xp

【讨论】：

这适用于 Firefox，但不适用于 IE7。我知道这很愚蠢，但我必须为我的客户定位 IE7。
我只是……太离谱了。这是一个很好的答案。
在IE7中可能做不到。如果是这种情况，您最好的选择是使用UL 或DL 创建一个假下拉列表并设置样式。