如何设置CSS的width或left属性以获得像素完美的效果？

Question

I just started experimenting with JS/CSS a bit and I came across this problem I couldn't find an answer for on the forum. 我刚刚开始尝试使用JS / CSS，但遇到了这个问题，但在论坛上找不到答案。

I wonder how I could get rid off the white line in the middle of the window (picture attached). 我不知道如何摆脱窗口中间的白线（附有图片）。 It doesn't appear all the time but at certain scalings. 它并非始终出现，而是以一定比例显示。

Many thanks 非常感谢

<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .d {
        position: fixed;
        margin: 0;
        padding: 0;
        border: 0px;

        background-color: #A1F1F1;
        text-align: center;


    }
</style>
</head>
<body>

    <script>

    var numOfDivsHor = 10;
    var numOfDivsVer = 10;

    function setCubeSize() {

        document.body.innerHTML = '';

        var w = document.body.clientWidth;
        var h = document.body.clientHeight;
        var fs = h/numOfDivsVer/3;

        for (i=0; i < numOfDivsHor; i++) {
            for (j=0; j < numOfDivsVer; j++) {
                var d = document.createElement('div');
                document.getElementsByTagName('body')[0].appendChild(d);

                d.id = i + '' + j;
                d.className = 'd';
                d.innerHTML = i + '' + j;

                setLayout(i + '' + j, w, h, fs);

                d.style.left = j * w/numOfDivsHor + 'px';
                d.style.top = i * h/numOfDivsVer + 'px';
                d.style.backgroundColor = 'rgb(120, ' + Math.round(i * 25.5) + ', ' + Math.round(j * 25.5) + ')';
            }

        }

    }

    function setLayout(divId, w, h, fs) {
        var d = document.getElementById(divId);
        d.style.width = 100/numOfDivsHor + '%';
        d.style.height = 100/numOfDivsVer + '%';
        d.style.fontSize = fs + 'px';
        d.style.paddingTop = (h/numOfDivsVer - fs)/2 + 'px';

    }

    document.addEventListener('DOMContentLoaded', function() {;
        setCubeSize();
    });

    window.addEventListener('resize', function() {
        setCubeSize();
    });

    </script>
</body>
</html>

white line in the middle 中间的白线

Answer 1

This a rounding issue that is common when dealing with graphics and floating point numbers. 这是一个舍入问题，在处理图形和浮点数时很常见。 You more or less just need to floor values when you divide. 当您除法时，您或多或少只需要floor值。

Specifically, this change fixes the problem in the code that you posted. 具体来说，此更改可解决您发布的代码中的问题。 Change: 更改：

d.style.left = j * w/numOfDivsHor + 'px';
d.style.top = i * h/numOfDivsVer + 'px';

to: 至：

d.style.left = j * Math.floor(w/numOfDivsHor) + 'px';
d.style.top = i * Math.floor(h/numOfDivsVer) + 'px';

Note that you will be left with whitespace on one edge of the grid. 请注意，您将在网格的一侧留有空白。 This is because the size of the window is not a perfect multiple of the size of a cell. 这是因为窗口的大小不是单元格大小的完美倍数。 You have to choose either between keeping the sizes of the cells the same, as above, or having varying sizes of cell, which would take a bit more work. 您必须选择保持像上面一样的像元大小，或者选择不同的像元大小，这将需要更多的工作。

如何设置CSS的width或left属性以获得像素完美的效果？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-23 23:27:49

如何设置CSS的width或left属性以获得像素完美的效果？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-23 23:27:49

解决方案1
1 已采纳 2018-02-23 23:27:49