Dropdownlist text is invisible in IE8

问题:

For some reason my DDL options are all invisible in IE8. They're clearly there since the list has 127 options but the text is invisible. In Firefox everything shows up fine. I even tried putting an inline style on the select with the color set to black with !Important. When I inspect the DDL with Firebug it doesn't show it inheriting any styles, only what I've put inline.

I added var to the first line in the loop in case it was some kind of pass by reference issue, hoping that var would essentially create a new variable each time through the loop and not end up with a single instance. That didn't work either and from what I've read using var a second time on a variable in javascript does not cause it to become a new variable.

I'm populating the drop downs from an array:

var option = document.createElement("option");
option.textContent = "Select...";
option.value = 0;
departmentDropDownList.appendChild(option);

for (var i = 0; i < departments.length; i++)
{
    var option = document.createElement("option");
    option.textContent = departments[i][1];
    option.value = departments[i][0];
    departmentDropDownList.appendChild(option);
}

回答1:

IE8 does not support the textContent property. You have to shim for it and use innerText instead.

option.textContent = option.innerText = departments[i][1];