2

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

问题：

Webkit 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于：

CSS 块

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

更新：这里有一个活生生的例子（尽管使用过时的图形）。在 Webkit 浏览器中单击诸如“医疗费用”之类的项目会显示带有间距错误的弹出窗口。

4

2 回答 2

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>');

奇怪的差距消失了。

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

于 2011-01-12T13:09:39.517 回答
0

这是因为浮动问题似乎允许位于浮动元素上方的绝对定位元素影响元素在绝对定位元素中的流动方式。

于 2011-06-30T11:48:46.927 回答