IE11中元素宽度百分比被保留两位小数，如何保留精确值？

这个问题确实是IE11渲染引擎的特性——它会自动将CSS百分比宽度值四舍五入到两位小数，而Chrome等现代浏览器支持更高的精度。要在IE11中实现精确的宽度控制，你可以尝试以下几种方法：

方法1：转换为精确的像素值 #

如果父元素的宽度是固定值（比如已知父元素宽度为1000px），你可以通过计算将百分比转换为像素值后再设置：

const dataWidth = parseFloat(element.dataset.width);
const parentWidth = element.parentElement.offsetWidth;
const exactPixelWidth = (parentWidth * dataWidth) / 100;
element.style.width = `${exactPixelWidth}px`;

IE11对像素值的精度支持比百分比更好，通常能保留更多小数位，从而实现更精确的宽度。

方法2：使用transform: scaleX()模拟宽度缩放 #

如果父元素宽度不固定，或者计算像素值不方便，可以用CSS的transform属性来缩放元素，因为IE11对transform的数值精度支持更高：

const dataWidth = parseFloat(element.dataset.width);
// 将百分比转换为缩放比例（比如1.2359%对应0.012359）
const scaleRatio = dataWidth / 100;
// 先将元素宽度设为100%，再通过缩放得到目标宽度
element.style.width = '100%';
element.style.transform = `scaleX(${scaleRatio})`;
// 可选：如果需要保持元素在流中的位置，添加transform-origin
element.style.transformOrigin = 'left center';

这种方法的好处是不需要依赖父元素的固定宽度，缩放比例可以完全保留原始的精确值。

方法3：使用CSS calc()计算宽度 #

虽然IE11对calc()的支持有限，但可以尝试用它来组合数值，避免直接设置百分比的精度丢失：

const dataWidth = parseFloat(element.dataset.width);
element.style.width = `calc(100% * ${dataWidth} / 100)`;

不过这个方法的效果可能因IE11的解析逻辑而异，建议先测试验证。

需要注意的是，IE11的渲染精度本身有限，即使使用上述方法，视觉上的差异可能非常微小，但这些方法能确保你设置的数值是精确传递的。

内容的提问来源于stack exchange，提问作者Rebecca O'Riordan