Почему этот сайт полностью ломается в IE 8, но отлично работает в Firefox 3.6.2? - PullRequest
1 голос
/ 04 июля 2010

Может быть, гуру HTML / CSS могут объяснить? Я нахожу это несколько ироничным, учитывая фокус сайта.

http://www.vowsjs.org

Ответы [ 4 ]

2 голосов
/ 04 июля 2010

Вот решение, которое может работать для вас ... только что попробовал его в моей локальной среде разработчика с вашим исходным кодом, и оно, кажется, работает довольно хорошо ...

Сделайте резервную копию исходного файла, прежде чем сделать это.

Просто найдите и замените все <header></header>, <section></section>, <nav></nav>, <footer></footer>, <article></article> теги и замените на <div></div> ...

so <section id="menu"> becomes <div id="menu"> 
</section> becomes </div>
<header id="main"> becomes <div id="main"> 

и так далее ...

Эти теги не являются действительными HTML по стандартам HTML 4 или XHTML 1.0 и не будут корректно отображаться ...

Поскольку все эти теги на самом деле отображаются в виде блоков в файле main.css, как показано ниже, для них будет вполне нормально отображать их как DIV, которые также являются блоками.

nav,
header,
footer,
section,
article {
  display: block;
}

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

Кроме того, вам следует преобразовать некоторые ссылки в вашем CSS в эти элементы, подобные этому;

nav {
  margin-left: 15px;
}

что-то вроде

.nav {
  margin-left: 15px;
}

и добавьте class = "nav" в div (ранее <NAV> token) следующим образом;

<div class="nav">

Спасибо, :) Norman.

ОБНОВЛЕНИЕ: как только вы выполните поиск и замену только в html-файле ... вы увидите, что он работает ... вы можете внести незначительные изменения в CSS и добавить занятия позже. Я верю, что все пользовательские шрифты, и ваш исправленный JavaScript работает в IE после исправления.

РЕДАКТИРОВАТЬ: попробуйте этот код ниже, как новый HTML-файл на вашем рабочем столе ... откройте его в IE ... шрифты выглядят хорошо! (- удалил некоторое содержимое, чтобы ответ не превышал 30000 символов - вам также понадобится main.css на рабочем столе)

<code><!doctype html> 
<html> 
  <head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="http://www.vowsjs.org/js/less.js" type="text/javascript"></script> 
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Vows &laquo; Asynchronous BDD for Node</title> 
  </head> 
  <body> 
    <div> 
      <div id="main"> 
  <div class="content"> 
    <div id="intro"> 
      <h1>Vows</h1> 
      <h2><span>Asynchronous</span> behaviour driven <span>development</span> for Node.</h2> 
      <h3> 
        There are two reasons why we might want asynchronous testing.
        The first, and obvious reason is that node.js is asynchronous,
        and therefore our tests should be. The second reason is to make tests which target I/O
        run much faster, by running them concurrently.
      </h3> 
    </div> 

    <div id="example"> 
        <p>Write some vows, execute them:</p> 
        <pre class="command">$ vows test/* --spec

Получите отчет, убедитесь, что вы сдержали слово.

A non-promise return value
  &#10003; <span class="vow">should be converted to a promise</span> 
A topic not emitting an error
  &#10003; <span class="vow">should pass null if the test is expecting an error</span> 
  &#10003; <span class="vow">should pass the result otherwise</span> 
A topic emitting an error
  &#10003; <span class="vow">shouldn't raise an exception if the test expects it</span> 
A context with a nested context
  &#10003; <span class="vow">has access to the environment</span> 
  - <span class="vow pending">can make coffee</span> 
A nested context
  &#10003; <span class="vow">should have access to the parent topics</span> 
A nested context with no topics
  &#10003; <span class="vow">should pass the parent topics down</span> 

&#10003; <span id="ok">OK</span> &#187; <strong>7</strong> honored &bull; <strong>1</strong> pending <span id="time">(0.112s)</span>

Установка

Самый простой способ установить Vows - через npm , менеджер пакетов узлов, например:

$ npm install vows

Это даст вам последнюю стабильную версию. Если вы хотите кровоточить, попробуйте:

$ npm install vows@latest

Ссылка

CLI и модуль подтверждения задокументированы здесь.

Тестовый бегун

vows [FILE, ...] [options]

Выполнение специальных тестов

$ vows test-1.js test-2.js
$ vows tests/*

Запуск всех тестов в папке test / или spec /

$ vows

Режим просмотра

$ vows -w
$ vows --watch
<ч />

Опции

Утверждение функций

равенство

assert.equal          (4, 4);
assert.strictEqual    (4 &gt; 2, true);

assert.notEqual       (4, 2);
assert.strictNotEqual (1, true);

assert.deepEqual      ([4, 2], [4, 2]);
assert.notDeepEqual   ([4, 2], [2, 4]);

тип

assert.isFunction (function () {});
assert.isObject   ({goo:true});
assert.isString   ('goo');
assert.isArray    ([4, 2]);
assert.isNumber   (42);
assert.isBoolean  (true);

assert.typeOf     (42, 'number');
assert.instanceOf ([], Array);

правда

assert.isTrue  (true);
assert.isFalse (false);

ноль, не определено, NaN

assert.isNull      (null);
assert.isNotNull   (undefined);

assert.isUndefined ('goo'[9]);
assert.isNaN       (0/0);

включение

assert.include ([4, 2, 0], 2);
assert.include ({goo:true}, 'goo');
assert.include ('goo', 'o');

соответствие регулярному выражению

assert.match ('hello', /^[a-z]+/);

длина

assert.length ([4, 2, 0], 3);
assert.length ('goo', 3);

пустота

assert.isEmpty ([]);
assert.isEmpty ({});
assert.isEmpty ("");

Исключения

assert.throws(function () { x + x }, ReferenceError);
assert.doesNotThrow(function () { 1 + 1 }, Error);

О

Обеты были разработаны Алексисом Селье , более известным как cloudhead .

питание от toto , МЕНЬШЕ и hijs

Авторские права & copy; Алексис Селье, 2010

Разбуди меня на GitHub
2 голосов
/ 04 июля 2010

Этот сайт создан с использованием HTML5, и, насколько мне известно, IE8 его не поддерживает.

1 голос
/ 04 июля 2010

С другой стороны, предупреждение об ошибке в IE6 - «Пожалуйста, откройте в современном браузере» - Epic. И реквизит для хорошего, чистого дизайна.

В настоящее время лучшие рекомендации для крупных клиентов, с которыми я работал в последнее время, строго соответствуют html 4.01 с целью обновления, когда 5 станет более поддерживаемым. Код выглядит великолепно .... но, как и все остальное, действительно круто, мы находимся во власти Microsoft на IE, и есть так много людей, работающих с Explorer (хотя с каждым днем ​​становится все меньше и меньше)

Я работал над одним проектом, который построил совершенно отдельный сайт для IE. Это просто не было весело, но результат был очень выполнимым.

Как сказал Крочи, углы, цвета и т. Д. Не очень хорошо поддерживаются. Тем не менее, многие вещи, такие как закругленные углы, хорошо переходят в IE в квадратные углы. Я не уверен, что то же самое можно сказать о цветах. См. http://www.quirksmode.org/css/contents.html для более подробной информации о том, что поддерживается и не поддерживается.

1 голос
/ 04 июля 2010

Возможно, потому что он использует CSS3, а CSS3 не полностью поддерживается ( или полностью не поддерживается ) в IE8.Например, веб-сайт использует цвета RGBA (цвета, содержащие прозрачность).

Он также использует некоторые теги HTML 5 как <section/>, которые не поддерживаются в IE8.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...