css - 使用 Bootstrap 制作的网站在 Chrome 中的布局有问题

Question

我正在为网络工作室开发作品集网站。这是:http://codenotfound.github.io/coldcrystal/

它在 Firefox 中完美运行，但在 Chrome 中我注意到两个不一致的地方:

1. 导航栏中的图片未对齐。我试过 display: inline，但没用。
2. 社交图标周围出现奇怪的边框。

这是图片:problems

我不是跨浏览器兼容性方面的专家，所以如果能对这些问题提供帮助，我们将不胜感激。

Answer 1

这里是使用 Chrome 的解决方案:

1.) 对于 Logo ，您可以添加以下 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删除社交图标周围的线条。