JSFiddle - React, Tailwind, and code Playground
HTML
<div class="support-test">
iframe Returns
<output id="iframe-test-supported">testing...</output>
</div>
<div class="support-test">
jQuery Returns
<output id="jquery-supported">testing...</output>
</div>
CSS
/* This will break box model detection in IE8 */
* {
box-sizing: border-box;
}
/* window dressing */
.support-test {
margin: 5px auto;
padding: 5px;
width: 100px;
text-align: center;
font-family: Arial;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #efefef;
color: #111;
}
.support-test output {
display: block;
color: white;
margin: 5px 0 0;
padding: 5px;
}
.true {
background-color: green;
}
.false {
background-color: red;
}
JavaScript
function do_test () {
var support_boxModel = false,
iframe = document.createElement("iframe"),
i_window,
i_document,
div,
html;
iframe.id = "test-iframe";
document.body.appendChild(iframe);
i_window = frames[iframe.id];
i_document = i_window.document;
div = i_document.createElement("div");
div.style.width = div.style.padding = "1px";
div.style.border = 0;
div.style.overflow = "hidden";
div.style.display = "block";
// for some reason IE doesn't automatically add a body
// or html element to a brand new iframe
if (!i_document.documentElement) {
html = i_document.createElement("html");
i_document.appendChild(html);
html.appendChild(i_document.createElement("body"));
}
i_document.body.appendChild(div);
support_boxModel = div.offsetWidth === 3;
document.body.removeChild(iframe);
return support_boxModel;
}
// IE doesn't recognize HTML5
document.createElement("output");
$(function () {
var boxModel = do_test();
$("#iframe-test-supported").text(boxModel).addClass(boxModel.toString());
$("#jquery-supported").text($.support.boxModel).addClass($.support.boxModel.toString());
});