Page shake caused by font-size

As in the scene, the page is divided into headers and content two pieces, head height is 50px,1px border, the middle content is an IFRAME, the height needs to be calculated each time, as follows

<script>
$ (function () {setiframeheight ();}) function Setiframeheight () {$ ("#mainFrame"). Height (document.body.clientheight-52);} $ (window). Resize (function () {  setiframeheight ();});
</script>

IE, Firefox test down all OK, the results in testing chrome, found up and down there are shaking, after a variety of search problems, found more than 5PX.

The final discovery is caused by the font-size of the DIV element, and finally the font-size:0 is set; Tangled 3 hours of problems finally solved ...

<div class= "Row" > <div  class= "col-md-12" style= "font-size:0;" ><iframe  id= "MainFrame" name= "MainFrame" src= "addorder.html" frameborder= "No" marginwidth= "0" title= " MainFrame "scrolling=" Auto "style=" width:100%;height:100%; " > </iframe> </div></div>    

　　

Page shake caused by font-size