Webkit间隔行为 - 由Web Inspector纠正 [英] Webkit spacing behaviour - corrected by Web Inspector

问题描述

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

问题：

文本大小控件上方的间距不应该在那里，它应该看起来像：

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

弹出窗口的HTML为：

 < div class = 弹出 > 
< div class =header> 
< div class =block>< / div> 
 。在Webkit浏览器中单击诸如医疗费用之类的项目会显示带间距错误的弹出窗口。  
 
解决方案
浮动问题，似乎允许位于浮动元素上方的绝对位置元素影响元素在绝对定位元素内的流动。
 
I've encountered a random issue in Webkit based browsers (tested in Chrome and Safari).  On a website I maintain I've been updating the artwork we use for our error messages, and it looks great in all browsers except Webkit based browsers.  The problem I am having seems to disappear when I toggle any CSS rule on or off through the Web Inspector. 

The problem:



The spacing above the text-size controls shouldn't be there, it should look like:



The annoying thing is that the spacing disappears when I toggle any css property in Web Inspector. 

The HTML for the popup is:
<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>
And the key part of the CSS is:
.popup
{
  width: 310px;
}

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

.popup .header .block
{
  float: left;
  height: 19px;
  width: 210px;
}
Where .block is applied to:



Does anyone know why this occurs and if there is a workaround?

Update: A live example (although using outdated graphics) is available here. Clicking an item such as 'Medical Expenses' in a Webkit browser displays the popup with spacing error.
解决方案
This was due to a float issue that seemed to allow absolutely position elements sitting above the floated elements to affect how the elements was flowing within the absolutely positioned elements.

                        
这篇关于Webkit间隔行为 - 由Web Inspector纠正的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！