Question

。 c / c ++ / c＃成员的注释：不要注意html，看看计算示例！

我有大div - #wrapper。这个包装器在js上调整步长100px以适合用户调整窗口的大小。

Wrapper有一些孩子（盒子），盒子（和盒子）有自己的尺寸（宽度，高度，边距，填充），以像素为单位。

我需要准确计算所有值的比例。

是的，我知道CSS中的scale（）。但这在Chromium中存在一些漏洞（不是隐藏的溢出内容），还有更多 - 我需要支持IE 7/8

我已将问题命名为 - ＆＃34;一个像素问题＆＃34;。看看例子：

<div class="#wrapper" style="width: 800px; height: 800px;">
<div class="box" style="width: 100px; height: 100px;">
    <div class="inner-box" style="width: 90px; height: 90px; margin: 5px 0 0 5px;"></div>
</div>
</div>

假设包装器的尺寸减小到500x500。

计算（伪语言）：

maxWrapperSize  = 800;
currWrapperSize = 500;
diff = currWrapperSize / maxWrapperSize; // 0.625

boxWidth  = 100 * diff; // 62.5
boxHeight = 100 * diff; // 62.5

innerBoxWidth  = 90 * diff; // 56.25
innerBoxHeight = 90 * diff; // 56.25
innerBoxMarginTop  = 5 * diff; // 3.125
innerBoxMarginLeft = 5 * diff; // 3.125

checkHeight = innerBoxMarginTop * 2 + innerBoxHeight; // 62.5 Yes!

但是我需要没有漂浮的圆形。这是像素MFG！你可以告诉我一半的像素？确定：

boxWidth  = round(boxWidth); // 63
boxHeight = round(boxHeight); // 63

innerBoxWidth  = round(innerBoxWidth); // 56
innerBoxHeight = round(innerBoxHeight); // 56
innerBoxMarginTop  = round(innerBoxMarginTop); // 3
innerBoxMarginLeft = round(innerBoxMarginLeft ); // 3

checkHeight = innerBoxMarginTop * 2 + innerBoxHeight; // 62 No!

所以，我的问题是：如何准确计算出这个值？

精确计算扩展根（一般父元素）元素的所有子元素

0 个答案: