为什么这个网站在IE 8中完全破解但在Firefox 3.6.2中完美运行？

时间：2010-07-03 23:52:41

标签： html css internet-explorer

也许HTML / CSS专家可以解释一下？鉴于该网站的重点，我觉得有点讽刺。

http://www.vowsjs.org

4 个答案:

答案 0 :(得分：2)

此网站由HTML5制作，因为我知道，IE8不支持它。

答案 1 :(得分：2)

这是一个可能对您有用的解决方案......只是在我的本地开发环境中使用您的源代码尝试它，它似乎工作得很好......

在执行此操作之前，请对原始文件进行备份。

只需查找并替换所有<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 4或XHTML 1.0标准的有效HTML，无法正确呈现......

由于所有这些标签实际上都是如下所示在main.css中呈现为块，因此它们可以完全呈现​​为DIV也是块。

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

如果您不想更改任何标签..您可以尝试使用IE特定的jQuery或javascript替换标签（您可以通过Google搜索轻松找到如何执行此操作。）

此外，您应该将css中的一些引用转换为这样的元素; 

nav {
  margin-left: 15px;
}

类似

.nav {
  margin-left: 15px;
}

并将class =“nav”添加到div（以前为<NAV>令牌），如此; 

<div class="nav">

谢谢，:) 诺曼。

更新：只要您在html文件中执行查找和替换...您将看到它有效...您可以对CSS进行少量编辑并添加以后的课程。我相信所有自定义字体，并且修复后你的javascript在IE中正常工作。

编辑：尝试以下代码作为桌面上的新html文件..在IE中打开它...字体看起来不错！ （ - 删除了一些内容，以便答案符合30000字符限制 - 您还需要桌面上的main.css）

<!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</pre> 
        <p>Get the report, make sure you kept your word.</p> 
        <pre>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></pre> 
    </div> 
  </div> 
  <div style="clear: both"></div> 
</div> 

<div id="menu"> 
  <div class="content"> 
    <div> 
      <a href="#intro">intro</a> 
      <a href="#docs" id="guide-link">guide</a> 
      <a href="#installing">installing</a> 
      <a href="#reference">reference</a> 
      <a href="#about">about</a> 
      <a href="http://github.com/cloudhead/vows">source <img id="github" src="/images/github.ico"/></a> 
    </div> 
    <div id="dropdown"> 
      <ul> 
        <li><a href="#-structure-of-a-test-suite">Structure of a Test Suite</a></li> 
        <li><a href="#-how-topics-work">How topics work</a></li> 
        <li><a href="#-running-a-suite">Running a Suite</a></li> 
        <li><a href="#-writing-asynchronous-tests">Asynchronous Testing</a></li> 
        <li><a href="#-assertions">Assertions</a></li> 
        <li><a href="#-macros">Macros</a></li> 
      </ul> 
    </div> 
  </div> 
</div> 

<div id="synopsis"> 

</div> 

<div id="installing"> 
  <div class="content"> 
    <h1>Installing</h1> 

<p>The easiest way to install Vows, is via <a href="http://github.com/isaacs/npm">npm</a>, the node package manager, as so:</p> 

<pre><code>$ npm install vows
</code></pre> 

<p>This will get you the latest stable version. If you want the bleeding edge, try:</p> 

<pre><code>$ npm install vows@latest
</code></pre> 

  </div> 
</div> 

<div id="docs"> 

</div> 

<div id="reference"> 
  <div class="content"> 
    <h1>Reference</h1> 

<p>The CLI and assertion module are documented here.</p> 

<h2>Test runner</h2> 

<pre><code>vows [FILE, ...] [options]
</code></pre> 

<p>Running specific tests</p> 

<pre><code>$ vows test-1.js test-2.js
$ vows tests/*
</code></pre> 

<p>Running all tests in your <em>test/</em> or <em>spec/</em> folder</p> 

<pre><code>$ vows
</code></pre> 

<p>Watch mode</p> 

<pre><code>$ vows -w
$ vows --watch
</code></pre> 

<hr /> 

<h3>Options</h3> 




<h2>Assertion functions</h2> 

<h3>equality</h3> 

<pre><code>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]);
</code></pre> 

<h3>type</h3> 

<pre><code>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);
</code></pre> 

<h3>truth</h3> 

<pre><code>assert.isTrue  (true);
assert.isFalse (false);
</code></pre> 

<h3>null, undefined, NaN</h3> 

<pre><code>assert.isNull      (null);
assert.isNotNull   (undefined);

assert.isUndefined ('goo'[9]);
assert.isNaN       (0/0);
</code></pre> 

<h3>inclusion</h3> 

<pre><code>assert.include ([4, 2, 0], 2);
assert.include ({goo:true}, 'goo');
assert.include ('goo', 'o');
</code></pre> 

<h3>regexp matching</h3> 

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

<h3>length</h3> 

<pre><code>assert.length ([4, 2, 0], 3);
assert.length ('goo', 3);
</code></pre> 

<h3>emptiness</h3> 

<pre><code>assert.isEmpty ([]);
assert.isEmpty ({});
assert.isEmpty ("");
</code></pre> 

<h3>exceptions</h3> 

<pre><code>assert.throws(function () { x + x }, ReferenceError);
assert.doesNotThrow(function () { 1 + 1 }, Error);
</code></pre> 

  </div> 
</div> 

<div id="about"> 
  <div class="content"> 
    <h1>About</h1> 

<p>Vows was developed by <a href="http://cloudhead.io">Alexis Sellier</a>, more commonly known as <a href="http://cloudhead.io">cloudhead</a>.</p> 

    <div> 
        <p>powered by <a href="http://cloudhead.io/toto">toto</a>, <a href="http://github.com/cloudhead/less.js">LESS</a> and <a href="http://github.com/cloudhead/hijs">hijs</a></p> 
        <p id="copy">Copyright &copy; Alexis Sellier 2010</p> 
    </div> 
  </div> 
</div> 

    </div> 
    <a href="http://github.com/cloudhead/vows"> 
      <img style="position: absolute; z-index: 5; top: 0; left: 0; border: 0;"
           src="http://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"
           alt="Fork me on GitHub" /> 
    </a> 
    <script src="http://www.vowsjs.org/js/hijs.js"></script> 
  </body> 
</html>

答案 2 :(得分：1)

可能是因为它使用CSS3，并且IE8中不完全支持CSS3（or completely unsupported）。例如，该网站使用大量RGBA颜色（包含透明度的颜色）。

它还使用一些HTML 5标记作为<section/>，IE8中既不支持这些标记。

答案 3 :(得分：1)

另一方面，IE6中的错误警告 - “请在现代浏览器中打开”是Epic。和道具的良好，干净的设计。

我最近与之合作的大客户目前的最佳做法是html 4.01严格，当5支持更多时，着眼于升级。代码看起来很棒....但就像其他一切真的很酷，我们受微软在IE上的摆布，并且有很多人在运行资源管理器（尽管它每天变得越来越少）

我参与了一个为IE构建完全独立的网站的项目。这并不好玩，但结果非常可行。

正如Croci所说，角落，颜色等都没有得到很好的支持。但是，很多东西，比如圆角，在IE中都会很好地降低到方角。我不确定颜色是否也可以这么说。有关支持和不支持的内容的详细信息，请参阅http://www.quirksmode.org/css/contents.html。

相关问题
最新问题