Проблема CSS в IE8

Question

У меня есть эта проблема при использовании CSS в IE8. Если я использую CSS, текстовые поля не отображаются на веб-странице. Если я не использую CSS, текстовые поля отображаются. Все, что я делаю, это удаляю стили из HTML в файл CSS для 3 DIV. Кто-нибудь знает, почему у меня такое странное поведение?

Следующая часть на самом деле работает. Стиль для "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>

Теперь все, что я сделал для div "bannerOption1Div", "bannerOption2Div" и "bannerOption3Div", перенесло их стили в класс CSS с именем bannerSection, что вызывает проблемы. Текстовые поля не отображаются !! Любая помощь приветствуется. Благодарю. Ой забыл, у меня есть слушатель 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 свойство display для DIV с "" на "block", и теперь отображаются текстовые поля. Но все же два других стиля "ширина: 10% и выравнивание текста: центр" не работают. Нужно ли вручную устанавливать их снова в Javascript? Удаляются ли они Javascript?

fieldElement.style.display = "block";

Answer 1

Полагаю, ваш javascript устанавливает свойство style элементов в пустую строку.
Который работает, когда стили встроены, но не когда они находятся в CSS.

В этом случае указание javascript установить display: static; в качестве значения свойства style должно работать.

Answer 2

Вам необходимо установить ширину для .bannerWrapper. Это должно сделать более понятными процентную ширину и выравнивание текста дочерних элементов.

Кроме того, теги <font> заставляют младенца Иисуса плакать.

Answer 3

Вы должны обернуть код CSS в <style></style> теги

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

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