The element width is a fractional number in FF and IE, but an integer in Chrome

Question

I have a problem with cross-browser HTML make-up. In Firefox and Internet Explorer, the width of the div container created using the bootstrap is a fractional number (for example, 900.5), and the child completely inherits this width. In Chrome, the container still has a fractional width (900.5), but the width of the child is an integer (900), and I would like to keep it that way. The question is, how should I do this without hard coding the width?

 <div class="container-fluid" style="margin: 10px 0 10px 10px;">
     <div class="row">
         <div class="col-lg-3 nopadding"></div>
         <div class="col-lg-9 nopadding" style="left: -1px;">
                 <div id="content">                      //this divs width is 900.5 everywhere
                     <div id="content-table"></div>      //this divs width is 900 in Chrome and 900.5 in FF and IE
                 </div>
         </div>
     </div>
 </div>

EDIT: Unfortunately, I was not able to load the whole problem into jsFiddle because the media queries do not work there, so I put the code with almost the same situation here . In this example, you can also see that element c id="content"has fractional width everywhere, but its child element c id="content-table"has integer width in Chrome and fractional in FF and IE.

Answer 1

The solution may be to change the property of the displayelement #content-table. You used the display:tableelement to behave like an element <table>. In your case, this is not necessary because you are not using a child table-cell, table-rowetc. (For example, display:table-cellor display:table-row).

display:block. Chrome. , overflow:auto overflow:hidden, . JSFiddle , width: 200.5px #content, . : https://jsfiddle.net/jeqmefxy/