CSS 和 IE9：标签被错误解释

Question

我正在做一个关于化学安全象形图的 MCQ 的小网站。

学生阅读问题、选择答案、验证并阅读另一页上的答案。

很简单。

正确答案用绿色书写，如果学生回答正确，还会出现绿色“好答案”信息。错误的选择会用红色写成“错误答案”。

该网站在firefox上完全正确，但颜色和字体在IE9上显示不正确。

我在部分中使用标签：

<style>
  itsfalse {
    font-family: "Times New Roman",serif; 
    font-weight: bold; 
    color:#00A000;
  }
  itstrue { 
    font-family: "Times New Roman",serif; 
    font-weight: bold; 
    color:#FF0000;
  }
  goodans {
    font-family: "Arial",sans-serif; 
    font-weight: bold; 
    color: #00A000; 
    font-size:larger;
  }
  badans {
    font-family: "Arial",sans-serif;
    font-weight: bold;
    color:#FF0000;
  }
</style>

For instance when the choice was right I'd have something like :

<itstrue>[the right answer]</itstrue> 
<goodans>Good answer!</goodans>

正如我所说，Firefox 正确读取它，而 IE 读取标签之间的内容但不使用样式。

如果我不使用 CSS 而是使用良好的 HTML 及其 <font></font>，没问题，但它有点重。

http://hildoceras.fr/quizz 上的 PS 网站（在法语标签是 vrai、faux、bon、mau 在correction.php 中）

Answer 1

我认为你的主要问题是你在编造元素。一些浏览器会很好地解析它，而另一些浏览器会忽略为这些元素所做的任何样式声明。这就是 HTML5 shim 存在的原因。

尝试将标准 HTML 元素（<p>、<div>）与“itstrue”和“goodans”等类结合使用。

Answer 2

你不应该使用自定义的 HTML 标签，如果你这样做了，它就不再是 HTML。

坚持使用 HTML 并使用 CSS 类，如下所示：

    <style type="text/css"> 
    .itsfalse {font-family:"Times New Roman",serif; font-weight:bold; color:#00A000;} 
    .itstrue {font-family:"Times New Roman",serif; font-weight:bold; color:#FF0000;} 
    .goodans {font-family:"Arial",sans-serif; font-weight:bold; color:#00A000; font-size:larger;} 
    .badans {font-family:"Arial",sans-serif; font-weight:bold; color:#FF0000;} 
    </style>
    ...
    <span class="itstrue"> [the right answer] </span> 
    <span class="goodans">&nbsp;&nbsp;&nbsp;Good answer !</span>