javascript - IE8中的CSS问题

Question

我在 IE8 中使用 CSS 时遇到了这个问题。如果我使用 CSS，文本字段不会显示在网页上。如果我不使用 CSS，则会显示文本字段。我所做的只是将样式从 HTML 中删除到 3 个 DIV 的 CSS 文件中。有人知道我为什么会出现这种奇怪的行为吗？

下面的部分确实有效。 “bannerOption1Div”、“bannerOption2Div”和“bannerOption3Div”以及 HTML 中的样式。文本字段显示并对齐。

<td align=center>
  <div class="bannerWrapper">
    <div id="bannerOption1Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption1Source" id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px;  padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption2Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption2Source" id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/> 
      <font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption3Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption3Source" id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
  </div>
</td>

现在，我为“bannerOption1Div”、“bannerOption2Div”和“bannerOption3Div”div 所做的所有工作都将它们的样式移动到名为“bannerSection”的 CSS 类中，这会导致问题。不显示文本字段!任何帮助表示赞赏。谢谢。 哦，忘了，我有一个 javascript 监听器，它会在页面加载完成后显示这些文本字段。因此它将在页面加载完成后删除 display:none 。这也适用于上面的 HTML。

下面是我的 CSS 和 HTML。

.bannerSection{
    width: 10%;
    text-align: center;
    display: none;
}

.bannerWrapper{
    margin-left: 10px;
    float:left;
    height: 100px;
}


<td align=center>
  <div class="bannerWrapper">
    <div id="bannerOption1Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption1Source" id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px;  padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption2Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption2Source" id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/> 
      <font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption3Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption3Source" id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
  </div>
</td>

更新:好吧，一些回答指出了 Javascript 是问题所在。我认为这是真的。所以我在我的 Javascript 中将 DIV 的显示属性从“”切换为“ block ”，现在显示文本字段。但其他两种样式“width:10% 和 text-align: center”仍然被破坏。我是否必须在 Javascript 中再次手动设置它们？它们会被 Javascript 删除吗？

fieldElement.style.display = "block";

Answer 1

我的猜测是您的 javascript 将元素的 style 属性设置为空字符串。
这在样式为内联时有效，但在样式位于 css 中时无效。

如果是这种情况，告诉 javascript 将 display: static; 设置为 style 属性的值应该可行。