问题

Question

我试图制作进度条。

您认为宽度为1％的div水平放大100倍会跨越其父级的宽度，但它不会。留下的接缝空间量取决于我的窗口大小，所以我认为这可能是浏览器中的舍入问题。我有什么办法可以做到这一点吗？

我经常更改此栏的进度，所以我不想每次都更改栏的宽度属性，因为这会导致performance issues。

＆＃13;

public class Aufgabe2 {

    public static void main(String[] args) {
        /* TODO: add code here */
        int n;
        int sum = 0;
        boolean exit = true;

        Scanner input = new Scanner(System.in);



        while (true) {

            n = input.nextInt();

            if (n == 0) {
                exit = true;
            } else {
                sum += n;
                System.out.println(sum);

            }
        }
    }
}

＆＃13;

body {
  margin: 0;
  padding: 0;
}
#container {
  background-color: red;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  height: 100px;
}
#progress {
  position: absolute;
  left: 0;
  top: : 0;
  width: 1%;
  height: 100%;
  background-color: yellow;
  transform: scale(100, 1);
  transform-origin: left top;
}

＆＃13;

我还制作了一个代码来展示这个问题：http://codepen.io/bigblind/pen/Zbozjv

Answer 1

留下的接缝空间量取决于我的窗户尺寸，所以我想这可能是浏览器中的舍入问题。

是。它是。

我不想每次都更改条形的宽度属性

我不是试图在这里讨论性能问题，而只是试着集中讨论如果不是width那么可以使用什么属性的问题？

嗯，你可以把你的进步放在首位。而不是#progress div扩展以显示进度，而是将其滑出以显示背景#container div以显示进度。使用translate滑动进度。

在下面的演示中，悬停以查看有效的转换。

演示小提琴：http://jsfiddle.net/abhitalks/y2o7yub9/1

演示代码段

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
#container{
    background-color: yellow; position: fixed;
    left: 0; right: 0; top: 0;
    height: 100px; width: 100%;
    overflow: hidden; white-space: nowrap;
}
#progress{
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: red;
    transform: translateX(0%); transition: transform 0.5s;
}
#container:hover > div { transform: translateX(100%); }

＆＃13;

<div id="container">
  <div id="progress"></div>
</div>

＆＃13;

Answer 2

问题

在我看来，存在一个舍入问题。

在1920像素的显示器上，1％被转换为19.188像素，向下舍入为19像素

19像素* 100 = 1900像素，留下20像素的间隙。

此处提供更多信息：http://ejohn.org/blog/sub-pixel-problems-in-css/

编辑：如果您重新缩放浏览器，在某些宽度上，红色部分会变大，变小或变小;这证实了四舍五入问题。

解决方案

声明一个固定宽度的进度条：200px
将其初始化为2px，无法向上/向下舍入

将1％宽度的div缩放100倍并不会覆盖父级的整个宽度

2 个答案:

问题

解决方案