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

【问题标题】：Website made with Bootstrap has problems with layout in Chrome使用 Bootstrap 制作的网站在 Chrome 中的布局存在问题
【发布时间】：2015-10-29 16:10:14
【问题描述】：

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

它在 Firefox 中完美运行，但在 Chrome 中我注意到两个不一致之处：

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

这是图片：problems

我不是跨浏览器兼容性方面的专家，因此我们将不胜感激。

【问题讨论】：

欢迎来到 StackOverflow！请阅读how to ask a good question - 特别是关于在您的问题中包含（最少）代码的部分

标签： css twitter-bootstrap google-chrome

【解决方案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 即可删除社交图标周围的线条。

【讨论】：

谢谢塞巴斯蒂安！你是最有帮助的。我的问题解决了。