My web application user interface is mostly built with excellent Knockout.js. It shows some layout errors in IE8 in IE7 compatibility mode. I tried to add a meta tag to force the use of standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
However, in IE9, in the IE9 compatibility view (which I have to assume that some users will be installed), this causes an error when Knockout performs the binding:
DOM exception: INVALID_CHARACTER_ERR (5)
I found a lot of links to this error on the net - to make the way the DOM elements are created, but obviously I have no control over this, knockout.
What is a reliable and minimally hacky way to make (or encourage) all existing and future versions of IE to display in standard mode, which is also compatible with how Knockout.js creates the DOM? Also, can anyone clarify what exactly Knockout.js does, what IE9 doesn't like? Many thanks.
UPDATE:
I have isolated at least one problem in my markup. I have a couple of switches:
<input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Male)" /> <span>Male</span> <input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Female)" /> <span>Female</span>
The name attribute of this switch pair is generated as “gender-” plus the model identifier of the currently bound view, since I have a deep hierarchy with several instances of this switch pair. Since I generate the name attribute using Knockout, I don’t point it to the input in the markup - and when I also add a manual name, such as "joe", it binds correctly in browser mode: "IE9 Compatibility View", So, as if in compatibility mode, the switch was invalidated by IE because it does not have a name attribute. But it works in browser mode: "IE9".
Also, this is not specific to the IE-edge meta tag, it will fail when I switch to the compatibility view no matter - but my next question is: why does this meta tag not override the browser settings?