html - 具有绝对位置和内联 block 的媒体查询，似乎不适用于 Chrome

Question

有人能给我一些关于这种奇怪行为的线索吗？

1. 当浏览器很宽时，我们会在表单的右侧有一个提示 field 。没关系。
2. 当我们缩小视口(viewport)时，提示会到达底部 应该。
3. 当我们尝试将视口(viewport)重新缩放为宽时，提示文本 与其他元素重叠，而不是回到原来的位置 如预期的那样。

Mac OS 10 上的 Chrome V.46。

第 1 步 - 浏览器完全打开 - 提示文本位于右侧

第 2 步 - 如果我们缩小视口(viewport)，提示将移至底部。好的。

第 3 步 - 当我们尝试调整浏览器窗口大小时，提示不跟随位置:

第 4 步 - 这是提示忽略输入字段位置时检查器的样子:

第 5 步 - 然后取消选中检查器窗口中的“绝对位置”，它保持如下状态:

第 6 步 - 最后，我选中同一个复选框，它会转到适当的位置。

有人遇到过类似的问题吗？

我试图在 Fiddle 上重现它，使用相同的规则，而不仅仅是出于明显原因的完全相同的元素，但它似乎在那里工作: https://jsfiddle.net/5m04na1u/1/

<div>Lets imagine I'm a form element wrapper</div>
<p class="hint-block">I'm a hint text block</p>

div {
    position: relative;
    width: 100px;
}

.hint-block {
    display: block;
    color: blue;
}

        @media screen and (min-width : 56.25em) {
            .hint-block {
                position: absolute;
                display: inline-block;
                color: red;
            }
        }

同样，这只是 Chrome 的问题。在其他浏览器上试过，效果很好。但 99% 的时间都是我的错，即使不是，我仍然必须以某种方式解决这个问题。

有什么线索或建议吗？

更新: 这是一个实时代码示例: 对不起。我不得不删除该链接，因为该产品尚未上线，并且客户表达了担忧。

Answer 1

我的建议是:

• 从帮助 block 中删除position: absolute
• 添加vertical-align: middle 帮助 block

工作对我来说很有魅力