Webkit 间距行为 - 由 Web Inspector 纠正

Question

我在基于 Webkit 的浏览器中遇到了一个随机问题（在 Chrome 和 Safari 中测试）。在我维护的一个网站上，我一直在更新我们用于错误消息的插图，它在除基于 Webkit 的浏览器之外的所有浏览器中看起来都很棒。当我通过 Web 检查器打开或关闭任何 CSS 规则时，我遇到的问题似乎消失了。

问题：

文本大小控件上方的间距不应该存在，它应该如下所示：

烦人的是，当我在 Web Inspector 中切换任何 css 属性时，间距会消失。

弹出窗口的 HTML 为：

<div class="popup">
  <div class="header">
    <div class="block"></div>
    <a class="normalFont" href="javascript:void(0);" title="Normal Font"><span>Normal Font</span></a>
    <a class="largerFont" href="javascript:void(0);" title="Larger Font"><span>Larger Font</span></a>
    <a class="largestFont" href="javascript:void(0);" title="Largest Font"><span>Largest Font</span></a>
    <a class="close" href="javascript:void(0);" title="Close"><span>Close</span></a>
  </div>
  <div class="message">...</div>
  <div class="footer"></div>
</div>

CSS 的关键部分为：

.popup
{
  width: 310px;
}

.popup .header
{
  height: 40px;
  margin: 0;
  padding: 0;
  background: url(...);
}

.popup .header .block
{
  float: left;
  height: 19px;
  width: 210px;
}

.block 应用到的位置：

有谁知道为什么会发生这种情况以及是否有解决方法？

更新：提供了一个实例（尽管使用过时的图形）此处。在 Webkit 浏览器中单击“医疗费用”等项目会显示带有间距错误的弹出窗口。

Answer 1

这不是一个完整的答案，但希望它足以为您指明正确的方向。

在 Client.Popups.js 的 CreateOverlay 函数中，如果我注释掉这一行：

ResizeOverlay(offset.top, offset.left, width, height, target == null ? null : target);

并将其替换为一些快速的 hacky 代码以制作覆盖层：

$("body").append('<div style="position:absolute;top:0;width:' + $(document).width() + 'px;height:' + $(document).height() + 'px;background:red;opacity:0.5"></div>');

奇怪的差距是走了。

所以我的建议是仔细查看/重写覆盖代码。

Answer 2

这是由于浮动问题造成的，该问题似乎允许位于浮动元素上方的绝对位置元素影响元素在绝对定位元素内的流动方式。