Проблема с control.style.display = 'none'; только в IE6

Question

Вот переключатель. Раньше у меня были проблемы с отображением: никто не работал в Firefox. Теперь это IE6 сводит меня с ума.

Я изменяю веб-сайт для компании друга, который, к сожалению, до сих пор использует львиную долю машин на IE6. У меня есть веб-форма (сгенерированная ASP, но не в этом моя проблема), в которой хранятся контактные данные, например их адрес.

Поскольку они имеют дело с международными клиентами, им необходимо, чтобы адресная система была максимально простой в использовании. Так что для «страны» я создал выпадающий список с более чем 235 странами мира. Затем я создал выпадающий список из 50 штатов США и текстовое поле для ввода провинции / города / и т. Д. Для других стран.

Мне нужно было быть умным, поэтому я сделал все это динамичным: выберите США, текст провинции исчезнет, ​​и появится раскрывающийся список Штат. Выберите любую другую страну, и они обратятся. Он прекрасно работает в Firefox, Safari, Opera, IE7, IE8 и в моей голове. IE6 задыхается от этого. Конечно. Потому что мне нужен браузер 1 .

Не удалось получить свойство отображения. Неверный аргумент

Вот мой заголовок скрипта, он очень простой:

function ToggleState(changeto)
{
  //Get the controls
  var stateTitle = document.getElementById('statelabel');
  var stateCombo = document.getElementById('state');
  var provTitle = document.getElementById('provlabel');
  var provText = document.getElementById('province');
  var countryCombo = document.getElementById('country');

  //We're hiding the state dropdown and showing the province box
  if(changeto == "Province"){
    //Update the Province Link so it's not active anymore
    provTitle.href = "javascript:function(){return;}";
    provTitle.style.color="#000";

    //Show the Province box and make it take up space
    provText.style.visibility = 'visible';
    provText.style.display = 'inherit';
    //Make the State Link active
    stateTitle.href = "javascript:ToggleState('State');";
    stateTitle.style.color="#00A";
    //Hide the State dropdown and keep it from eating up GUI room
    stateCombo.style.display = "none";
    stateCombo.style.visibility = "hidden";
    stateCombo.value = "";
    //Shift the country off of US because we're not in Kansas anymore
    if(countryCombo.value == "US") countryCombo.value = "";
  //We're hiding the province box and showing the State dropdown
  }else if(changeto == "State"){
    //Kill the link, make the box show up
    stateTitle.href = "javascript:function(){return;}";
    stateTitle.style.color="#000";

    stateCombo.style.visibility = "visible";
    stateCombo.style.display = "inherit";
    //Activate the link and kill the Province box
    provTitle.href = "javascript:ToggleState('Province');";
    provTitle.style.color="#00A";

    provText.style.display = "none";
    provText.style.visibility = "hidden";
    provText.value = "";
    //Make sure we're on the US...
    if(countryCombo.value != "US") countryCombo.value = "US";
  }else return;
}

//Fairly self-evident. If you change the country from US it trips the hide State
// If you change TO US trip the hide Province
function UpdateState(obj){
  if (obj.value == "US" &&
          document.getElementById('state').style.visibility == "hidden")
    ToggleState('State');
  else if (obj.value != "US" &&
               document.getElementById('state').style.visibility == "visible")
    ToggleState('Province');
}

А в теле (выпадающие вырублены для краткости) ...

<div class="ctrlHolder">  
  <label for="state">  
    <a id="statelabel" href="javascript:function(){return;}" style="text-decoration:none;color:#000">State</a>  
    / <a id="provlabel" href="javascript:ToggleState('Province');" style="text-decoration:none;color:#00A">Province</a>  
  </label>  
  <input type="text" id="province" class="textInput" style="display:none;visibility:hidden;" />  
  <select id="state" style="display:inherit;visibility:visible;">  
    <option selected="selected" value="">-Not Known-</option>  
    <option value="TX">Texas</option>  
    <option value="WY">Wyoming</option>  
  </select>  
</div>  
<div class="ctrlHolder">  
  <label for="country">Country</label>  
    <select id="country" onchange="UpdateState(this);">  
      <option value="">-Not Known-</option>  
      <option value="GB">United Kingdom</option>  
      <option selected="selected" value="US">United States</option>  
    </select>  
</div>  

Я в недоумении, почему IE6 не примет это. Здесь должно быть что-то, что я забыл / заблокировал здесь. Есть идеи??

Answer 1

Я не знаю, является ли это корнем вашей проблемы, но IE6 имеет проблемы с display: inherit.

С Smashing Magazine: различия в Internet Explorer 6, 7 и 8

IE6 и IE7 не поддерживают наследование значения, кроме случаев, когда они применяются к свойствам направления и видимости.

Как я уже сказал, я не знаю, является ли это причиной вашей проблемы, и я не знаю, в какой момент вы получаете ошибку (действительно ли это display: none), но она звучит так.

Вы можете попробовать заменить все inherit на пустые значения , просто чтобы проверить, так ли это.