Как мне сделать мою страницу совместимой с IE?

Question

Я создаю веб-сайт с использованием Django, мои шаблоны используют CSS и я тестирую его локально с помощью Firefox, но когда я только собирался «показать это» своим друзьям, я запускаю его против IE, и чертовски веб-сайт все сломано! заголовки все перепутаны, кажется, ничто не удерживает вместе, все пространства перепутаны! это плохо.

Чего-то не хватает! как объявление заголовка? DOCTYPE или что-то?

NB. Я взял css, который я использую, с какого-то сайта в Интернете, и когда я запускаю этот сайт в IE, все выглядит хорошо!

Помощь

Это оскорбительный css, раздел h1 , который использует этот css, является тем, который ломает, какие-либо подсказки?

div#header
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  text-align: left;
  width: 780px;
  height: 102px;
  background: url(/site_media/header_background.gif) no-repeat top left;
}


div#header h1
{
  padding: 30px;
  font-family: Verdana, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #c8c8c8;
  letter-spacing: -1px;
}

div#header h1 strong
{
  color: #999;
  width: 810px;
}

Answer 1

Во-первых, убедитесь, что вы используете объявление типа документа, которое не вызывает Режим причуд . Я предлагаю HTML 4.01 Strict или XHTML 1.0 Strict .

Во-вторых, убедитесь, что ваш сайт проверяется в соответствии с W3C validator .

Наконец, опубликуйте рассматриваемый сайт или фрагмент о том, что не так, чтобы мы могли проконсультировать вас дальше. Вам может понадобиться условный CSS специально для (версий) IE.

РЕДАКТИРОВАТЬ: Теперь, увидев ваше обновление, не могли бы вы опубликовать скриншот того, что вы считаете «сломанным», и можете ли вы убедиться, что страница НЕ , используя этот переходный тип документа и подтверждает. Также будет полезен сопровождающий HTML.

Answer 2

Для doctype основная цель - вывести браузер из режима quirksmode.

Вы можете использовать их

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

или даже просто

<!doctype> 

Какой тип документа HTML5, и он проще :) [Хотя, если вы проверите валидатор w3c для проверки кода, он выдаст разные ошибки.]

Что вас больше всего раздражает, так это отступы:

div # header h1 { отступы: 30 пикселей; ...

IE имеет другую модель бокса, чем в других браузерах, и первое, что нужно показать, это границы и отступы. (В IE ширина включает отступы, в других браузерах - нет)

Чтобы решить эту проблему, вы можете использовать условия IE или взломать , чтобы присвоить IE свои собственные стили, или вы можете использовать вложенные div и to и поля, которые обрабатываются более последовательно. Вы также можете использовать Дин Эдвардс IE7 или аналогичный, чтобы исправить это с помощью Javascript.

Answer 3

и после того, как ваш сайт будет доволен IE7, вам, вероятно, придется столкнуться со всеми дополнительными проблемами, которые IE6 все еще будет иметь с ним. IE6 по-прежнему работает примерно на 15% компьютеров, поэтому вам придется решить, что вы хотите с этим сделать ...

Да, и не забудьте про тестирование Safari, Chrome и FF2. :)

Answer 4

Попробуйте использовать файл reset.css для более «счастливого» кросс-просмотра. Вы можете увидеть подробную информацию о reset.css с сайта Эрика Мейера . Также есть еще один файл reset.css, разработанный одним из разработчиков Yahoo. Но результат одинаков для обоих reset.css. Вы можете попробовать любой из них.

Answer 5

Ты ничего не пропустил. Добро пожаловать в IE ...

Большинство проблем могут быть вызваны ошибками в движке рендеринга IE. Эти ссылки могут помочь:

• 10 основных проблем с IE в IE
• Баг IE Model Bug
• Позиция - это все - современные ошибки браузера подробно объясняются

Вы можете включить альтернативную версию таблицы стилей для IE, используя условные комментарии в своем HTML.

Steve

Answer 6

В этот раз это не поможет, но в следующий раз, когда вы создадите сайт «с нуля», попробуйте тестировать сайт в IE по крайней мере один раз в день. Таким образом, вы не получите такой сюрприз в конце.

Если вы хотите получить более точный ответ, опубликуйте URL, и кто-то укажет, почему он выглядит по-разному в IE и Firefox

Answer 7

Это моя функция PHP, которую я использую для определения соответствующей таблицы стилей:

    function stylesheet() {
    $ua    = $_SERVER["HTTP_USER_AGENT"];
    $iepos = strpos($ua,"MSIE");
    if ($iepos) {
        $vers = substr($ua,$iepos+5,1);
        if ($vers >= 8) return "style.css";
        else return "iestyle.css";
        }
    else return "style.css";
    }

У меня была действительно странная проблема, когда мне нужно, чтобы IE8 был "хорошей" версией, поэтому большинство людей, вероятно, могут измениться ...

if ($vers >= 8)

до ...

if ($vers >= 7)

Тогда у меня вместо обычной ссылки CSS есть:

<?php echo "<link rel=\"stylesheet\" href=\"".stylesheet()."\" />"; ?>

Удачи.