I'm having a very strange issue on IE8 (and only on IE version lower than 8). The problem is in attr binding, if I put encoded email string (with %26, %40 and etc.) the page won't render the data binds in text field ('[email protected]' in the case below), instead it will render as "mailto:first%26last%40domain.com".
<a data-bind=" visible: Email.length > 0, text: '[email protected]', attr:{ href: 'mailto:' + 'first%26last%40domain.com' }"></a>
The strange thing is it renders just fine if I use the non-encoded string
<a data-bind=" visible: Email.length > 0, text: '[email protected]', attr:{ href: 'mailto:' + 'first&[email protected]' }"></a>
Both ways work properly on Firefox and Chrome and higher version IE.
I debugged through it and found Knockout js is using the DOM method setAttribute() to set href. And per the documentation from W3School, setAttribute() supports browser IE9 and newer, so I think that is what causes the strange result.
I also searched around about the setAttribute(), other people also encountered similar issue, see link below: