Blueprint сайт полностью отличается в IE по сравнению с Firefox / Chrome - PullRequest
0 голосов
/ 05 декабря 2011

Я использую платформу Blueprint CSS для разработки своего веб-сайта для обеспечения кросс-браузерной совместимости ... за исключением того, что в IE он выглядит совершенно по-другому.

Сайт имеет вид http://rtwilson.com/academic-new/ и выглядитхорошо в Firefox и Chrome, но полностью запутался в IE.Основное тело не отцентрировано, изображение находится не в том месте, а текст довольно странный.

Кто-нибудь знает, как я могу это отсортировать?Я думал, что весь смысл Blueprint и соавт.было то, что это решило проблемы с кросс-браузерной (особенно IE) совместимостью.Я включил правильный файл стиля IE - так какие-нибудь другие идеи?

Ответы [ 2 ]

1 голос
/ 05 декабря 2011

Blueprint в порядке (хотя я недавно переключился на Twitter Bootstrap) - независимо от сложности сайта, и он делает все за вас, если ваша разметка верна и классы используются правильно.

Одним из мест, с которого нужно начать, кроме doctype (который также должен быть добавлен - как уже упоминалось в Michas), было бы добавить «последний» класс в div, содержащий ваш div панели navbar. То, как вы это написали прямо сейчас, это то, что у вас есть 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 пядей.

0 голосов
/ 05 декабря 2011

Если честно, я бы не использовал blueprint css - такой простой сайт, как ваш, я бы просто создал отдельную таблицу стилей для IE и связал бы ее так:

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