css - chrome 中的边框问题

Question

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

我很难在 JSFiddle 中重现它，但我实际上是在尝试将一个 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 级别中的内容也有更多内容。但是，container 中的其他元素都在页面上各自的 block 中(不重叠)，content 中的元素也是如此。分割 div 包含您可以在屏幕截图中看到的拨号盘和弹出窗口。这个想法是，当我将鼠标悬停在“ block ”或拨号盘上时，弹出窗口会显示在右侧，并在显示时将下一个拨号盘推过去。

Answer 1

当我缩放页面时，我发现了这样的边框问题 - 这可以解释为什么你只在 Chrome 中看到它并且只在一个域上看到它(你说你不能在 JSFiddle 中重现它)。

单击 Ctrl+0 或检查放大镜地址栏中是否有图标(当缩放级别不同于 100% 时显示)。