html - 元素的宽度在 FF 和 IE 中是小数，但在 Chrome 中是整数

Question

我对跨浏览器 HTML 结构有疑问。在 Firefox 和 Internet Explorer 中，使用 bootstrap 制作的 div 容器的宽度是一个小数(例如 900.5)，子元素完全继承这个宽度。在 Chrome 中，容器仍然有一个小数宽度 (900.5)，但子元素的宽度是一个整数 (900)，我想保持这种状态。问题是，如果不对宽度进行硬编码，我该如何做到这一点？

 <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>

编辑: 不幸的是，我无法在 jsFiddle 中上传整个问题，因为媒体查询在那里无法正常工作，所以我将代码放在几乎相同的情况下 here .在示例中，您还可以看到带有 id="content" 的元素到处都是小数宽度，但他带有 id="content-table" 的子元素在 Chrome 中具有整数宽度在 FF 和 IE 中是小数。

Answer 1

解决方案可能是更改 display #content-table 的属性(property)元素。您使用了 display:table , 让元素表现得像 <table>元素。在您的情况下不需要它，因为您不使用任何 table-cell , table-row等子元素(如 display:table-cell 或 display:table-row )。

您可以简单地使用 display:block .在这种情况下，子元素在 Chrome 中也将是小数。在你的例子中会出现一个滚动条，但你可以使用 overflow:auto或 overflow:hidden隐藏它。 我为解决方案创建了一个 JSFiddle 示例，使用 width: 200.5px对于 #content元素，但它也在您的代码中工作。解决方案链接:https://jsfiddle.net/jeqmefxy/