使用Bootstrap制作的网站在Chrome浏览器中的布局存在问题

Question

我正在为网络工作室开发一个投资组合网站。这是：http://codenotfound.github.io/coldcrystal/

它在Firefox中完美运行，但在Chrome中我发现了两个不一致的地方：

1. 导航栏中的图片未对齐。我试过显示：内联，它没有帮助。
2. 社交图标周围的奇怪边框。

图片中显示了problems

我不是跨浏览器兼容性方面的专家，因此我们将非常感谢您对这些问题的一些帮助。

Answer 1

以下是使用Chrome的解决方案：

1。）对于徽标，您可以添加以下CSS：

#logo {
    display: inline;
    padding-top: 0;
}

您必须将徽标<img id="logo" alt="Website Logo" src="assets/img/logo.png">移动到范围<span class="brand-font navbar-brand" style="display: inline;">中，如下所示：

<span class="brand-font navbar-brand">
    <img id="logo" alt="Website Logo" src="assets/img/logo.png">Cold Crystal
</span>

您可以移除试用style="display: inline;"

2。）只需将outline:0;添加到.social-icons i即可删除社交图标周围的行。