IE9 iframe width triggers responsive styles on parent frame

by Admiral Potato

HTML

<select id="s">
    <option>300</option>
    <option>400</option>
    <option>500</option>
    <option>600</option>
</select>
<button id="b">go</button>
<iframe id="f" src="./" height="200" width="200"></iframe>

CSS

iframe{
    display:block;
    margin: 0 auto;
}
body {
    background-color: #000;
}
@media (max-width: 600px){
    body {
        background-color: #f00;
    }
}
@media (max-width: 500px){
    body {
        background-color: #ff0;
    }
}
@media (max-width: 400px){
    body {
        background-color: #f0f;
    }
}
@media (max-width: 300px){
    body {
        background-color: #0f0;
    }
}

JavaScript

var select = $('#s');
var iframe = $('#f');
var buttonClickHandler = function(event) {
    console.log(num);
    var num = select.val();
    iframe.attr('width',num);
};
$(document).on('click', '#b', buttonClickHandler);