图标在 Chrome 和 Firefox 中居中，但在 Safari 中不居中

Question

我的首页横幅图片下方有 4 个图标，它们在 Chrome 和 Firefox 中居中显示，但在 Safari 中偏离中心。我还遇到了横幅图片号召性用语 "Tours" 的浏览器依赖性问题。它在 Chrome 和 Safari 上显示按钮边框，但在 Firefox 上不显示。

任何人都知道我的问题可能与这些问题中的任何一个相关吗？

我的网站是：http://foodforlifetours.com/

横幅图片上号召性用语按钮的代码：

<style>
#front-page-button-2:hover {
background-color:#0f0f0f !important;
}
</style>

<a href="http://foodforlifetours.com/tours/" id="front-page-button-2" style="background:none;  font-size:20px !important; border:1px solid white !important; text-shadow: 2px 2px black !important; color:white !important" class="button large">Tours</a>

Answer 1

您需要删除这些样式：

transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;

来自：

.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner .vc_icon_element-icon

图标在 Chrome 和 Firefox 中居中，但在 Safari 中不居中

Icons Centered in Chome and Firefox but not Safari

html

css

safari

firefox

google-chrome