动态元素宽度和IE9子像素精度

Question

我有3个div,#left,#center和#right,我想要在具有特定宽度的同一行上定位,比如300px.

#left和#right的内容很少,比如50px,我正在完全展示它们.

#center有很多内容,比如说400px,我希望尽可能在线上的剩余空间内显示.为此,我在#inner中包含了#center的内容.

我把#left和#center放到左边,#right放到右边.

<div id="left">
    LEFT
</div>
<div id="center">
    <div id="inner">
        LONG CONTENT ...
    </div>
</div>
<div id="right">
    RIGHT
</div>

问题1:有没有办法让#center div通过CSS占用线路上的所有剩余空间(在我们的例子中,#center必须是200px宽 - 线宽,300px,减去宽度#left和#right,每个50px)？

问题2:我没有通过CSS找到解决方案,我使用jQuery动态计算剩余的可用空间.这适用于IE9以外的所有浏览器.

IE9的问题在于它具有子像素精度,而jQuery仅返回元素维度的整数值.

这是一个例子:IE9认为#left的宽度为50.5px,而jQuery认为它具有50px.这种差异导致IE9中的布局中断.

如果我需要通过JavaScript计算可用空间,我该怎么做才能克服这个IE9问题？

Answer 1

为了将来参考，我所做的是将 IE9 视为浮点的宽度强制为 jQuery 视为整数的值：

var elem = $("#element");
elem.css("width", elem.width());

如果 #element 的值被 IE9 视为 50.5px，则 jQuery 会强制为其赋予 jQuery 所看到的值 50px。