Testing table layouts with jquery binding
Binding different versions of jQuery causes misalignment in rendering heights
by Fiddel
HTML
<div id="div1">Testing "display:table" with different versions of jQuery</div>
<div id="div2">
<h1>
Chrome renders different heights when using one of these libraries:<br>
<code>jquery-2.1.0.min.js</code><br>
<code>jquery-1.9.0.min.js</code><br>
<code>jquery-1.7.min.js</code><br>
</h1>
</div>
<div id="div3">CDN-Links:<a href="https://code.jquery.com/jquery/" target="blank">https://code.jquery.com/jquery/</a>
<div id="jQueryCDN">
</div>
</div>
CSS
html,
body {
width:100%;
height:100%;
}
body {
display:table;
margin:0;
padding:0;}
div {
width:100%;}
#div1,
#div3 {
height:1px;
display:table-row;
background-color:red;
}
#div2 {
height:auto;
display:table-row;
background-color:yellow;