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

【问题标题】：Dynamic element width and IE9 subpixel precision动态元素宽度和 IE9 子像素精度
【发布时间】：2013-08-08 19:15:06
【问题描述】：

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

#left 和 #right 的内容很少，比如每个 50px，我将它们全部显示出来。

#center 有很多内容，比如说 400px，我想在行的剩余空间内尽可能多地显示。为此，我将#center 的内容包含在#inner 中。

我已将#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：有没有办法让#center div 通过 CSS 占据线上所有可用的剩余空间（在我们的示例中，#center 必须是 200 像素宽 - 线的宽度，300 像素，减去#left 和 #right 的宽度，各 50px) ?

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

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

这是一个例子：IE9 认为#left 的宽度为 50.5px，而 jQuery 认为它的宽度为 50px。这种差异会导致布局在 IE9 中中断。

如果我需要通过 JavaScript 计算可用空间，我该如何解决这个 IE9 问题？

【问题讨论】：

我不确定这是否可行，但您能否将返回的值设置为下限并使 50.5 变为 50？如果值总是更多，那么这将起作用。如果是 49.5，那么您将是一个像素短，但这至少不会导致您的内容不适合。
我无法影响在其布局中使用 IE9 的浮点值。当我在 IE9 中用 jQuery 调用元素宽度时，它总是返回一个整数，50px。但在非内部显示中，IE9 使用浮动，50.5px。我知道这一点是因为我查看了 IE9 开发人员工具以及它显示浮点值的元素尺寸。
那么当你设置宽度为50px时，ie9设置为50.5px？这很奇怪......我以前在像素级别上排列过这样的东西，从来没有遇到过麻烦。似乎很奇怪。祝你好运，抱歉我没能帮上忙！
不，你说的是“地板返回的值”，但是 jquery 从不返回浮点值，它只返回整数值，即使在内部，IE9 将宽度显示为浮点数。

标签： javascript jquery css

【解决方案1】：

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

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

如果#element 有一个被 IE9 视为 50.5px 的值，jQuery 会强制在其上设置一个 jQuery 看到的值，50px。

【讨论】：

【解决方案2】：

试试这个：

main = $("#main").width();
centerWidth = main - ( $("#left").width() + $("#right").width() );
$("#center").width(centerWidth);

或：

main = parseFloat(document.getElementById("main").style.width)
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width));
document.getElementById("center").style.width = centerWidth + "px"

【讨论】：

我指定我这样做了，但它在 IE9 中不起作用，因为 IE9 的宽度具有浮点值，而 jquery 只返回整数值。示例：IE9 将 #left 视为 50.5px，jquery 将 #left 视为 50px。这个浮点值会导致布局中断，因为 IE9 看到的多 0.5px，因此它无法适应计算值。
没有什么可以使用 Math.ceil() 因为 jquery 总是将元素宽度作为整数返回。只有 IE9，内部将其视为浮点数。
我发现克服这个问题的唯一方法是强制 jquery 在被视为浮动的元素上看到的宽度。示例：$("#left").css("left", $("#left").width());如果 IE9 将看到 #left 为 50.5px，jquery 将强制宽度为 50px。但这种方法似乎并不理想。
试试.innerWidth()，是的，width()返回一个整数值，以便更好地计算。
根据我的测试和 jQuery API (api.jquery.com/innerWidth)，innerWidth 也返回一个整数。

【解决方案3】：

我的解决方案：

el = $('#myelement');

//Hello IE9-10 and float "width", e.g. 83.41px;
try {
  var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest;
catch (e) {
  var elWidth = el.width(); 
}

elWidth; //IE 9-10 return 84px, other browsers 83px;

【讨论】：