IE9 bug with Html.DropDownListFor

Question

Hello I need some help with a bug in Internet Explorer 9. I am currently developing some CRUD screens in ASP.NET 4 MVC 3 Razor. In a multiple screen I use the @Html.DropDowListFor to create easy links for Foreign keys.

But when I few these in IE9 (and only IE9) the DropDownList will be rendered smaller than its usual size, the text will be displayed a few pixels lower than normal, and the if the word that is displayed is larger than a small amount of characters(not sure what number, I think it's about 10) it will not be fully rendered. The weird part is that when I click on the DropDownList it will fix itself.

The View code:

@Html.DropDownListFor(model => model.Asset.FkAssetTypeId, new SelectList(Model.AssetTypes, "AssetTypeId", "Name"))
@Html.ValidationMessageFor(model => model.Asset.FkAssetTypeId)

The Model code:

[Display(ResourceType = typeof(I18N_Asset), Name = "Label_Asset_FkAssetTypeId")]
public int FkAssetTypeId { get; set; }

Anybody have any experience with this issue, and know a way to fix this? thank you for the help.

Answer 1

I have found what the problem was, I was using JQuery tabs on the same page. This caused the frontsize of the dropdownlistfor-s to not scale to the css that is set for the whole site. but instead renders the dropdownboxfor with the frontsize of the JQuery tabs and than sets the frontsize to the css.

I have solved this issue by using Javascript to set the font-size in a Document.ready function:

// IE9 causes a bug where the dropdownlists will not be displayed correctly because they won't adapt to their current font-size
// this javascript fixes that by resetting the font-size
if (window.navigator.systemLanguage && (!document.documentMode || document.documentMode === 9)) { //check if IE9 is being used
    var list = document.getElementsByTagName('Select'); // get all dropdownlists
    for (i = 0; i < list.length; i++) {
        list[i].style.fontSize = list[i].style.fontSize; // reset the font-size
    }
}