internet explorer - CSS styling via data attribute is not working properly on IE -

i have list data attribute "data-layout", can 2 options "vertical" , "horizontal".

in css change list items display property according layout.

on chrome works expected on ie (tested on ie11) not redraw screen change.

if enter ie's devtools , select on of items in elements panel redraws correct state.

here reproduction of problem.

http://fiddle.jshell.net/dimshik/bss3je3u/

thank you.

document.getelementbyid('toggle').addeventlistener('click',function(){      var list = document.getelementbyid('list');      if(list.dataset.layout == 'vertical'){          list.dataset.layout = 'horizontal';      } else {          list.dataset.layout = 'vertical';      }    });

[data-layout="horizontal"] li {      display: inline;      padding: 0 10px;  }

<ul id="list" data-layout="vertical">      <li>a</li>      <li>b</li>      <li>c</li>      <li>d</li>  </ul>  <br>  <br>  <button id="toggle">toggle layout</button>

it seems dataset changing, not re-rendering css.

i've changed code setattribute , worked (ie11);

http://fiddle.jshell.net/bss3je3u/2/