Webkitスペーシングの動作 - Web Inspectorで修正されました

Question

Webkitベースのブラウザ（ChromeとSafariでテスト済み）でランダムな問題が発生しました。私が維持しているウェブサイトでは、エラーメッセージのために使用するアートワークを更新しており、Webkitベースのブラウザを除くすべてのブラウザで素晴らしいと思われます。私が抱えている問題は、Web Inspectorを使用してCSSルールのオン/オフを切り替えると消えるようです。

問題：

間隔テキストサイズのコントロールがあってはならない上に、それは次のようになります。

迷惑なものがあることですWebインスペクタのの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の重要な部分は、次のとおりです。

ん：.blockが適用されている

.popup 
{ 
    width: 310px; 
} 

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

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

なぜこのようなことが起こっているのか誰でも知っています。 d？

更新：ライブの例（古いグラフィックを使用しています）はhereです。 Webkitブラウザで「Medical Expenses」などの項目をクリックすると、間隔エラーでポップアップが表示されます。

Answer 1

これは浮動要素の上に位置する絶対位置要素を絶対配置要素内でどのように流れているかに影響を与える浮動小数点の問題によるものです。

Answer 2

これは完全な回答ではありませんが、適切な方向に向けるだけで十分です。 CreateOverlay関数内Client.Popups.jsで

、私はこの行コメントアウトする場合：

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

とオーバーレイを作るためにいくつかの簡単なハックのコードに置き換えます

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

を奇妙なギャップであります行った。

私の提案は、オーバーレイコードを詳しく見直すことです。