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

Question

我有 3 个 div，#left、#center 和#right，我想将它们放置在具有特定宽度(比如 300 像素)的同一行上。

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

Example fiddle

问题 1:有没有办法通过 CSS 使#center div 占用行上所有可用的剩余空间(在我们的示例中，#center 必须是 200px 宽 - 行的宽度，300px，减去#left 和#right 的宽度，每个 50px) ?

问题2:我没有通过CSS找到解决方案，我已经使用jQuery动态计算剩余可用空间。这在除 IE9 之外的所有浏览器中都可以正常工作。

IE9 的问题在于它具有亚像素精度，而 jQuery 仅返回元素维度的整数值。

这是一个示例:IE9 将#left 视为具有 50.5 像素的宽度，而 jQuery 将其视为具有 50 像素。这种差异导致布局在 IE9 中中断。

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

Answer 1

为了将来引用，我所做的是将 IE9 视为 float 的宽度强制为 jQuery 视为整数的值:

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

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