Question

My web app’s UI is mostly built with the excellent Knockout.js. It is showing some layout errors in IE8 under IE7 compatibility mode. I have tried adding a meta tag to force standards mode like so:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

However, in IE9 under IE9 Compatibility View (which I have to assume some users will have set) this causes an error when Knockout does its binding:

DOM Exception: INVALID_CHARACTER_ERR (5)

I’ve found plenty of references to this error on the net – to do with the manner in which DOM elements are created – but obviously I’m not controlling this, Knockout is.

What is a robust and minimally hacky way to force (or encourage) all present and future versions of IE to render in standards mode, which is also compatible with how Knockout.js builds the DOM? Also, can anyone elaborate on exactly what Knockout.js is doing here which IE9 doesn’t like? Many thanks.

UPDATE:

I’ve isolated at least one issue in my markup. I have a pair of radio buttons:

        <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 pair of radio buttons is generated as “gender-” plus the ID of the currently bound view model, as I have a deep hierarchy with multiple instances of this pair of radio buttons. Because I am generating the name attribute with Knockout, I’m not specifying it against the input in the markup – and when I do also add a manual name such as “joe”, this binds correctly under Browser Mode: “IE9 Compatibility View”. So it’s as if when in compatibility mode, the radio button is being deemed to be invalid by IE because it doesn’t have a name attribute. But it works under Browser Mode: “IE9”.

Also this doesn’t relate specifically to the IE-edge meta tag, it will fail whenever I switch to Compatibility View regardless – but my next question is, why doesn’t that meta tag override the browser setting?

Answer 1

Try to wrap name attribute with quotes.

 <input type="radio" data-bind="checked: Gender, attr: { 'name': 'gender-' + ID() }" value="@((int)Sex.Male)" /> 

Check answer details at comments below