Safari 和 Chrome 浏览器中选项标签词之间的空格无效答案

【问题标题】：Space not work between option tag words in Safari and Chrome browserSafari 和 Chrome 浏览器中选项标签词之间的空格无效
【发布时间】：2013-12-22 10:30:48
【问题描述】：

HTML代码

    <select class="embroidery_options" name="personalise_this[embroidery_logo_location1]">
    <option value="">-----Select Position-----
    </option><option disabled="" value="">----------TOPS-----------</option>
    <option value="Left chest">Left       £1.75</option>
    <option value="Right chest">Right     £1.75</option>
    <option value="Centre chest">Centre   £1.75</option>                        
    </select>

Css 代码：（我在 css 代码中使用了以下字体，仅适用于 Firefox 和 IE 浏览器）

.logo_placement select option{font-family:Menlo, Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace, serif;}

该字体适用于 Firefox 和 IE，但不适用于 Safari 和 Chrome 浏览器

图片来自 Firefox 和 IE 浏览器

来自 Safari 和 Chrome 浏览器的图片

CHECK DEMO HERE

【问题讨论】：

你试过&nbsp;吗？
是的，我试过了，请在这里查看演示并比较所有浏览器jsfiddle.net/aKy8L/1

标签： css browser safari cross-browser

【解决方案1】：

您只需使用等宽（或固定宽度）字体。您指定了太多字体选项，其中一些用于 Firefox，另一些用于 Safari。尝试删除所有字体定义并简单地选择 Courier，这应该适用于所有浏览器。

【讨论】：

我也尝试过 Courier 字体，但无法使用 safari 和 Chrome 浏览器，请在此处查看演示 jsfiddle.net/aKy8L/3
其实我错了对不起。您显然无法设置选择跨浏览器的样式。见CSS Tricks for more info

【解决方案2】：

您需要应用等宽字体，但对于 select 和 option。尝试删除所有字体定义，然后选择 Courier

.logo_placement select option , .logo_placement select {
    font-family:Courier;
}

在这里查看http://jsfiddle.net/EgDRS/。它在我的 chrome、opera、ie 和 firefox 中工作。

【讨论】：