IE8 不断打破我的专栏答案

【问题标题】：IE8 Keeps Breaking My ColumnsIE8 不断打破我的专栏
【发布时间】：2012-10-24 15:18:36
【问题描述】：

我正在开发一个新网站 - http://cravezilla.com - 在 WordPress 上运行。我已经针对 Chrome、Mozilla、Safari 和 IE9+ 优化了该网站。但是，在 IE8 上，我网站的栏目都被扔掉了，我不知道为什么？

我附上了我的 IE8 预览截图。我可以在 CSS 中包含一些东西来解决这个问题吗？

图片如下：

【问题讨论】：

我已投票结束此问题，因为它对您的网站过于具体，不太可能帮助任何未来的访问者。最好的问题有一个独立的小示例，其中包含的代码刚好足以演示问题，没有任何额外内容。将此代码直接发布到问题中。这样做可能需要做很多工作，但它是解决问题过程中的关键部分。

标签： css wordpress internet-explorer-8 frontend

【解决方案1】：

在你的 css 文件中试试这个

.tri-block:last-child{
    margin-right:0;
    }

【讨论】：

【解决方案2】：

您正在使用 IE8 不支持的 box-sizing 属性。事情是你有一个 950px 固定宽度的 3 个元素的包装 div。并且您指定每个元素的宽度为 33.3%，内边距为 8px。它适用于 box-sizing，因为填充没有添加到宽度中。并且由于 IE 没有该方法并将填充添加到宽度，您将获得 33.3% + 33.3% + 33.3% + 填充值，该值比 950px 固定大小更宽，并导致第三个元素浮动到新行。

我建议您删除 box-sizing 属性并将这些 div 的固定宽度设置为 300 像素左右。它应该在您的 css 文件中的第 483 行。

希望对你有帮助。

【讨论】：

感谢您的及时回复。我会去测试这些。谢谢！
Box-sizing 不过很酷。将其保留在 IE8 中可能会更好。
这是真的斯科特。他可以只为 ie 使用特殊的 css，并将其保留为 Firefox 或其他浏览器。
使用下面的代码有意义吗？ .tri-block:last-child{ margin-right:0;那么 IE 的特殊 CSS 会是什么？谢谢。