control.style.display ='none'的问题;仅在IE6中

时间:2010-02-10 22:07:40

标签: javascript internet-explorer-6 css

这是一个开关。我曾经遇到过显示问题:无法在Firefox中使用。现在它的IE6让我疯了。

我正在为一家朋友的公司修改一个网站,不幸的是,该公司仍然在IE6上运行大部分机器。我有一个Web表单(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为什么不接受它。在这里我必须忘记/阻止我的想法。有任何想法吗??

1 个答案:

答案 0 :(得分:1)

我不知道这是否是您问题的根源,但IE6与display: inherit有问题。

来自Smashing Magazine: Differences in Internet Explorer 6, 7 and 8

  

除非应用于方向和可见性属性,否则IE6和IE7不支持值继承。

正如我所说的,我不知道这是否是导致你出现问题的原因,我不知道你在哪个时候得到了错误(是display: none),但听起来就是这样。

您可以尝试用空值inherit替换所有,只是为了检查是否是这样。