Chrome 选择框选项文本在打开时变形答案

【问题标题】：Chrome select box option text is distorted when openChrome 选择框选项文本在打开时变形
【发布时间】：2014-11-12 03:08:57
【问题描述】：

在我的 Chrome 版本 37.0.2062.120 中打开时，选择框中选项标签之间的文本无法正确呈现。

有关问题的清晰说明，请参见随附的屏幕截图。

当我选择一个选项并将焦点从框上移开时，选择了正确的选项并在选择框关闭时正确呈现。

我已经在 Canary 39.0.2161.0 和 FF 中进行了相同的测试，它可以正确渲染而不会失真。

我以前从未见过类似的东西。

与 Chrome 最近的字体渲染更新有关吗？

非常感谢任何帮助。！

页面链接，表单在底部：http://dev.emarkadvantage.com/strategy.php

更新：对我有用的修复方法是将 SVG 字体的位置从 @font-face 堆栈向下移动到底部。

【问题讨论】：

你应该在选项标签上添加样式。你能显示你的代码吗。
这里是链接：dev.emarkadvantage.com/strategy.php 表格在底部。

标签： html google-chrome html-select text-rendering

【解决方案1】：

我以前也有过。为您的选择使用标准（即非网络）字体。我不知道为什么网络字体会导致问题……但确实如此。

另见this answer。

【讨论】：

感谢您的回答。这使我找到了已确认的错误票：code.google.com/p/chromium/issues/detail?id=290414 我觉得奇怪的是它在 Canary 中有效但在 Chrome 中无效。也许这表明它很快就会修复？
对我有用的解决方法是将 SVG 字体的位置从 @font-face 堆栈向下移动到底部。

【解决方案2】：

你应该在选择标签上添加类，

class="表单控制"

<select id="category" class="form-control">
     <option value="">Your top callenge today?</option>
     <option value="Sales">Sales</option>
     <option value="Competition">Competition</option>
     <option value="Marketing ROI">Marketing ROI</option>
     <option value="Positioning">Positioning</option>
</select>

【讨论】：