Set IFrame height using the height attribute, disregarding a CSS rule

Does anyone know why the IFrame won't use the height attribute after specifying a css rule? In the following example, none of the IFrames will have a height of 500px.

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        iframe {
            height: 200px;
        }

        iframe.auto {
            height: auto;
        }

        iframe.inherit {
            height: inherit;
        }

        iframe.initial {
            height: initial;
        }

        iframe.revert {
            height: revert;
        }

        iframe.unset {
            height: unset;
        }
    </style>
</head>
<body>
    <iframe height="500"></iframe>
    <iframe class="auto" height="500"></iframe>
    <iframe class="inherit" height="500"></iframe>
    <iframe class="initial" height="500"></iframe>
    <iframe class="revert" height="500"></iframe>
    <iframe class="unset" height="500"></iframe>
</body>
</html>