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监听器，将在页面加载完成后显示这些文本字段。因此它将删除该显示：在页面加载完成后没有。这也适用于上面的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的显示属性从“”切换到“块”，现在显示文本字段。但是其他两种风格“宽度：10％和文本对齐：中心”仍然被打破。我是否必须在Javascript中再次手动设置它们？它们会被Javascript删除吗？

fieldElement.style.display = "block";

Answer 1

我的猜测是你的javascript将元素的style属性设置为空字符串哪种样式是内联的，但是当它们在css中时不起作用。

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

Answer 2

您需要为.bannerWrapper设置宽度这应该使子元素的百分比宽度和文本对齐更有意义。

此外，<font>标签让小耶稣哭了。

Answer 3

你必须在<style></style>标签中包装css代码

<style type="text/css">
.bannerSection{
    width: 10%;
    text-align: center;
    display: none;
}

.bannerWrapper{
    margin-left: 10px;
    float:left;
    height: 100px;
}
</style>

IE8中的CSS问题

3 个答案: