铬的边界问题

Question

我遇到了响应大小的div周围的固定边框问题。此问题仅发生在Chrome中。

我很难在JSFiddle中复制它，但我实际上是试图将div放在另一个div中（放在我页面的某个位置）并且居中的div在它周围有一个漂亮的1px边框。这两个要素的LESS如下：

.popup {
    display: inline-block;
    height: 93%; width: 30%;
    margin-right: 7%;
    margin-left: -3%;
    position: relative;

    .text {
        box-sizing: border-box;
        width: 100%; height: 50%;
        border: 1px solid black;
        padding: 0 5%;
        position: absolute;
        top: 50%; left: 50%;
        .translate(-50%, -50%); # Some LESS that is just a translate call
        color: black;
        font-size: 18px;
    }
}

这就是我所看到的，随着屏幕尺寸的变化而变化（有时是正确的，有时不同的边框丢失/不正确）：

编辑：添加了相关的HTML。

<div class="container">
    ...Other stuff...
    <div class="content">
        ...Other stuff...
        <div class="breakdown">
            <div class="block">C++ (Circle dials you see)</div>
            <div class="popup">
                <div class="text">Some text here to go in the popup</div>
            </div>
            <div class="block">Java (Next dial)</div>
            <div class="popup">
                <div class="text">Some text here to go in the popup for the Java dial</div>
            </div>
        </div>
    </div>
</div>

容器中有更多内容，显示的DOM级别内容更多。但是，容器中的其他项目都在页面上各自的块中（没有重叠），内容中的项目也是如此。细分div包含您可以在屏幕截图中看到的拨号和弹出窗口。我的想法是，当我将鼠标悬停在“块”或拨号盘上时，弹出窗口显示在右侧，在显示时推动下一个拨盘。

Answer 1

当我缩放页面时，我已经观察到边框的这些问题 - 这可以解释为什么你只在Chrome中看到它并且只在一个域上看到它（你说你不能在JSFiddle中重现它）。

单击Ctrl + 0或检查放大镜的地址栏中是否有图标（当缩放级别与100％不同时显示该图标）。