【问题标题】：Different behaviour and styling for SafariSafari 的不同行为和样式
【发布时间】：2019-07-30 08:59:36
【问题描述】：

我正在开发 Gatsby 应用程序，我添加了 Font Awesome Icon 和样式，但 Safari 的外观不同。图标完全失去了形状和比例。

Safari

谷歌浏览器

反应

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDatabase } from '@fortawesome/free-solid-svg-icons'

<span className="awesome-parent">
  <FontAwesomeIcon 
    className="major db-style awesome-icon" 
    icon={faDatabase}
  />
</span>

造型

.awesome-parent {
  display: inline-flex;
  border: solid 1px;
  border-radius: 100%;
  margin: 0 0 2em;
  padding: 0.5em;
  border-color: lightgray;


  .awesome-icon {
    border: solid 1px;
    border-radius: 100%;
    height: 10em;
    width: 10em;
    padding: 2em;
  }

  .db-style {
    color: _palette(db-blue);
    border-color: lightgray;
  }

}

谁能发现我做错了什么？我想补充一点，我还有一些其他图标，它们的样式完全相同，但颜色不同，它们的行为与预期的一样。

我还没有弄明白，所以我在这里添加可以调试的已部署网站。

https://bartoszszymanski.net

问候

【问题讨论】：

color: _palette(db-blue); 不是有效的 CSS 语法，因此渲染时将忽略该行。另外，不要将字符串拆分为多行，这也可能导致问题（类名）。
@BillieBobbel 我使用.scss，所以_pallette 按预期工作。将字符串分成几行怎么样，这就是这里的样式，因为行被奇怪地打破了。我会恢复它。

标签： css reactjs font-awesome gatsby

【解决方案1】：

请将border-radius: 100%; 更改为像素值。试试border-radius: 25px;，希望对你有帮助。谢谢

【讨论】：

不幸的是，没有改变任何东西。
您是否在任何服务器或任何工作示例上部署了您的代码？如需更多说明。谢谢