[在SAFARI浏览器中单击任何SELECT框时页面都会刷新

问题描述 投票:2回答:1

单击任何SELECT框,页面就会刷新。这仅在SAFARI浏览器中发生。我也在CHROMEFIREFOX中进行了测试,效果很好!

发布> SAFARI版本(在macOS Mojave上为Safari 12.1)>]

我找到了similar question here,但没有针对此问题的特定解决方案。

有人遇到过这个问题吗?如果是,请分享,如果您找到任何解决方案。

更新

当我从SELECTCSS中删除字体系列时,它不会重新加载页面。

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

@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>

单击任何SELECT框后,页面都会刷新。仅在SAFARI浏览器中会发生这种情况。我也在CHROME和FIREFOX中测试了同样的东西,效果很好!问题> SAFARI版本(...

html css macos safari page-refresh
1个回答
0
投票

创建您自己的字体工具包可以解决此问题。您必须通过为sele标签制作font-face来设置特定的font-family,并从font-face添加font-family。

© www.soinside.com 2019 - 2024. All rights reserved.