Internet Explorer 与 Chrome 中的 CSS 样式答案

【问题标题】：Css styling in Internet Explorer versus ChromeInternet Explorer 与 Chrome 中的 CSS 样式
【发布时间】：2017-12-18 05:36:57
【问题描述】：

我正在开发基于博客平台的网站，但我的 css 样式有问题。网址是：http://wibracjezdrowia.blogspot.com/p/opinie-klientow.html 问题：在 Chrome 浏览器中，一切正常，但是当我在 Internet Explorer 中检查时，徽标和绿色标志“GABINET TERAPII NATURALNYCH”的位置出现问题 - 我的意思是它们在 Chrome 中没有出现在一行中。任何人都可以帮助解决这个问题吗？谢谢！ :)

【问题讨论】：

哪个版本的 Internet Explorer 显示此问题？
我能够在 IE 11 上重现 OP 的问题
我已经弄清楚问题让我写答案。

标签： javascript html css google-chrome internet-explorer

【解决方案1】：

就在</head>（关闭头标记）之前添加以下代码以仅针对IE：

<!--[if IE]>
    <style>
        *, *::before, *::after{box-sizing: content-box}
    </style>
<![endif]-->

【讨论】：

【解决方案2】：

这不是直接问题的答案，但您是否考虑过使用 Bootstrap 更轻松地为您的网站元素设置样式以供桌面和移动使用？

【讨论】：

【解决方案3】：

问题是#header div 的大小。

您可以将此 div 的最大宽度更改为较低的值，应该没问题：

#header {
float: right;
width: 100%;
max-width: 690px;
color: #444;
margin: 0;
padding: 0;

}

我已将最大宽度从 735px 更改为 690px，效果很好。

【讨论】：