html – 元素的宽度是FF和IE中的小数,但是Chrome中的整数

概述我有跨浏览器 HTML化妆的问题.在Firefox和Internet Explorer中,使用bootstrap创建的div容器的宽度是小数(例如900.5),子元素完全继承此宽度.在Chrome中,容器仍然具有小数宽度(900.5),但子元素的宽度是一个整数(900),我想保持这种方式.问题是,如果不对宽度进行硬编码,我该怎么做呢？ <div class="container-fluid" st 我有跨浏览器 HTML化妆的问题.在firefox和Internet Explorer中,使用bootstrap创建的div容器的宽度是小数(例如900.5),子元素完全继承此宽度.在Chrome中,容器仍然具有小数宽度(900.5),但子元素的宽度是一个整数(900),我想保持这种方式.问题是,如果不对宽度进行硬编码,我该怎么做呢？

<div  >     <div >         <div ></div>         <div  >                 <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中有小数.

解决方法 解决方案可能是更改#content-table元素的display属性.您使用了display：table,它使元素的行为类似于< table>元件.在您的情况下,它不是必需的,因为您不使用任何table-cell,table-row等子元素(如display：table-cell或display：table-row).

您只需使用display：block即可.在这种情况下,子元素在Chrome中也是小数.在您的示例中将显示滚动条,但您可以使用overflow：auto或overflow：hIDden来隐藏它.
我为解决方案创建了一个Jsfiddle示例,使用宽度：200.5px作为#content元素,但它也适用于您的代码.解决方案的链接：https://jsfiddle.net/jeqmefxy/

总结

以上是内存溢出为你收集整理的html – 元素的宽度是FF和IE中的小数,但是Chrome中的整数全部内容，希望文章能够帮你解决html – 元素的宽度是FF和IE中的小数,但是Chrome中的整数所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。