css - 与 Firefox/Chrome 相比，IE 中的蓝图站点完全不同

Question

我正在使用 Blueprint CSS 框架来开发我的网站，以确保跨浏览器的兼容性...除了，它在 IE 中看起来完全不同。

站点是http://rtwilson.com/academic-new/在 Firefox 和 Chrome 中看起来不错，但在 IE 中完全搞砸了。正文不居中，图片放错位置，文字比较怪异。

有人知道我该如何排序吗？我认为 Blueprint 等人的全部观点。是它解决了跨浏览器(尤其是 IE)兼容性问题。我已经包含了正确的 IE 样式文件 - 还有其他想法吗？

Answer 1

Blueprint 很好(尽管我最近切换到 Twitter Bootstrap)- 无论网站的复杂程度如何，只要您的标记正确且类使用正确，它就会为您完成所有事情。

除了 doctype(应该添加，正如 Michas 所提到的)，一个开始的地方是向包含导航栏 div 的 div 添加一个“last”类。你现在写的方式是你有一个 span-24，包含另一个 span-24，紧接着是一个 span-15 和一个 span-9。

你有:

    <div class="span-24 last">
        <div class="span-24">
        ...
        </div> 
        <div class="span-15">
                ...
        </div>
        <div class="span-9 last">
                ...
        </div>
    </div>

您应该:

    <div class="span-24 last">
        <div class="span-24 last">
        ...
        </div> 
        <div class="span-15">
                ...
        </div>
        <div class="span-9 last">
                ...
        </div>
    </div>

正如现在所写的那样，如果 IE 无法确定一行中不应有 48 个跨度，我一点也不会感到惊讶。