具有绝对位置和内联块的媒体查询，似乎不适用于 Chrome答案

【问题标题】：Media query with position absolute and inline-block, doesn't seem to apply on Chrome具有绝对位置和内联块的媒体查询，似乎不适用于 Chrome
【发布时间】：2015-11-12 20:31:22
【问题描述】：

有人能告诉我这个奇怪的行为吗？

当浏览器很宽时，我们在表单的右侧有一个提示场地。没关系。
当我们缩小视口时，提示到达底部应该。
当我们尝试将视口重新缩放以再次变宽时，提示文本与其他元素重叠，而不是回到原来的位置符合预期。

Mac OS 10 上的 Chrome V.46。

第 1 步 - 浏览器完全打开 - 提示文字在右侧

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

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

第 4 步 - 这是提示忽略输入字段位置时检查器的外观：

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

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

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

我尝试在小提琴上重现这一点，使用相同的规则，不仅仅是出于明显的原因完全相同的元素，但它似乎在那里工作： 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% 的时间都是我的错，即使不是，我仍然必须以某种方式解决这个问题。

有什么线索或建议吗？

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

【问题讨论】：

好吧，如果 fiddle 有效，它可能是其他一些 CSS 规则以某种方式覆盖了这些规则。看看你的实际代码是个好主意
其他一些类可能会覆盖您的 CSS，如果您在 jsfiddle 中发布完整的演示 HTML 代码，我们可以查看。
小提琴与您的问题有所不同。请让它显示同样的问题..
更新了生命代码链接。

标签： html css

【解决方案1】：

我的建议是：

从帮助块中删除 position: absolute
加vertical-align: middle帮助屏蔽

工作对我来说就像一个魅力

【讨论】：

添加了垂直对齐：顶部，似乎比中间更好，同时与文本框并排。无论如何，这行得通，并且似乎解决了灵活性问题。虽然没有解释 Chrome 上的问题。我会报告这个问题，但我无法真正重现它，所以，让我们将答案保留在这里以供将来参考，以防有人发现相同的问题。

【解决方案2】：

添加 left: 400px 到 @media screen and (min-width: 56.25em) #checkoutform-email+.hint-block 解决了布局问题，但不是问题的根源。

我认为这应该被视为浏览器问题。由于它会考虑其兄弟元素的宽度来计算绝对元素的初始左侧.. 重新调整窗口大小后，会发生布局并且它不会再次考虑兄弟元素的宽度，重叠内部内容..

【讨论】：

这将是我的尝试。不要假设自动，而是声明特定的位置编号...
@MEM，缺点是这应该是某种自动的事情。在提高响应能力时添加特定数字可能是一个问题。我正在寻找有关如何/为什么会这样..
在解决问题的同时，我将按照@jQuery00 的建议测试绝对位置的删除。我有这些是有原因的，但我必须尝试一下，看看它是否正常。

【解决方案3】：

您不需要绝对位置。删除它，它会自动工作。

【讨论】：

是的，您可以通过多种方式布局这个“提示块”，absolute position 绝对不是必须的。但我认为问题的重点应该是：了解重叠的方式/原因当您使用 absolute position 时会发生。
是的，理解很好，但这似乎是chrome中的重绘错误，所以在firefox中我无法重现它。在 chrome 中，绝对定位可能会保存窄视图中的位置，并且当再次将窗口大小调整为大绝对定位时会保存虚拟的 top 属性。对不起我的英语。

【解决方案4】：

制作一个 div 怎么样，你可以把你的输入放在哪里？我认为它应该工作

【讨论】：