Safari的不同行为和样式

Question

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

Safari

Google Chrome

反应

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;
  }

}

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

致谢

Answer 1

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