Question

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

该网站为http://rtwilson.com/academic-new/，在Firefox和Chrome中看起来很不错，但在IE浏览器中完全搞砸了。主体不居中，图像位于错误的位置，文字相当奇怪。

有没有人知道如何对此进行排序？我想到了蓝图等人的全部观点。是因为它使用跨浏览器（特别是IE）兼容性对问题进行了排序。我已经包含了正确的IE样式文件 - 所以其他任何想法？

Answer 1

Blueprint很好（虽然我最近已经切换到Twitter Bootstrap） - 无论网站的复杂程度如何，只要您的标记正确且类正确使用，它确实可以为您完成所有工作。

一个开始的地方，除了doctype（也应该添加，如Michas所提到的），将是一个“last”类添加到包含navbar div的div。你现在写的方式是你有一个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个跨度。

Answer 2

如果我是诚实的，我不会使用蓝图css - 一个简单的网站，我只是为IE创建一个单独的样式表，并将其链接为

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

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

2 个答案: