谷歌字体和 Safari 选择问题答案

【问题标题】：Google Fonts & Safari SELECT problem谷歌字体和 Safari 选择问题
【发布时间】：2015-06-24 13:39:03
【问题描述】：

我从 Google 字体导入字体时出现选择问题。当我在 Safari 上单击选择时，网站会重新加载。在 Chrome、FF、IE 上一切正常。示例：

http://jsfiddle.net/stcvS/

谁能帮忙？

【问题讨论】：

您使用的是什么版本的 Safari？什么操作系统？地雷在 Win 7 上的 Safari 5.0.5 上运行良好
Safari 5.1 (6534.50); MAC OS X 10.6.8

标签： html css webkit safari

【解决方案1】：

您可以通过 CSS 定位 Safari 并避免该问题：

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* for Safari 5.1 bug http://stackoverflow.com/questions/7025826/google-fonts-safari-select-problem */

.formData SELECT {

    font-family:Helvetica, arial, sans-serif;
}

}

【讨论】：

【解决方案2】：

我不确定 JQuery 是否是您想要走的路线，但也许这会有所帮助：

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
    <select id="dropdown">
        <option>kiko</option>
        <option>atletico</option>
    </select>

    <script>
    jQuery(document).ready(function($){
        $("#dropdown").click(function(event) {
        event.preventDefault();
        });
    });
    </script>

【讨论】：

【解决方案3】：

这似乎是 Safari 5.1 中的一个错误。每个带有 CSS @font-face 的 SELECT 都会因页面重新加载而失败。

【讨论】：

我的经历中发生了同样的事情

【解决方案4】：

最好使用<ul></ul> 或<ol></ol> 并应用必要的 css 和 javascript 来使用 <select></select> 在这种特殊情况下我们必须应用不同的 font-familiy 、 font-style 等。

【讨论】：