在 SAFARI 浏览器中单击任何选择框时页面刷新

Question

单击任何SELECT框时，页面会立即刷新。 这只发生在SAFARI浏览器中。 我还在CHROME和FIREFOX中测试过同样的东西，效果很好！！

问题 > SAFARI 版本（macOS Mojave 上的 Safari 12.1）

我在这里发现了类似的问题，但没有针对此问题的具体解决方案。

有没有人遇到过这个问题？ 如果是，请分享您是否找到任何解决方案。

更新

当我从SELECT框CSS中删除字体系列时，它不会重新加载页面。

但是有什么解决方案可以在不重新加载页面的情况下应用相同的字体样式吗？

 @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap'); body { font-family: Quicksand, sans-serif; }.select-box { position: relative; width: 200px; } select { font-family: Quicksand, sans-serif; padding: 10px; width: 100%; font-size: 15px; border-radius: 4px; border: 1px solid #666; -webkit-appearance: none; }.select-box.chevron { position: absolute; top: 14px; right: 12px; height: 8px; width: 8px; border-right: 1px solid #666; border-bottom: 1px solid #666; transform: rotate(45deg); }

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="select-box"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <span class="chevron"></span> </div> </body> </html>

Answer 1

创建你自己的字体包可以解决这个问题。 您必须通过为select标签制作字体并从字体中添加font-family来设置特定的font-family 。

@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.woff2') format('woff2'),
         url('quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

select{
    font-family: 'quicksandregular';
}