2

Webkitベースのブラウザ（ChromeとSafariでテスト済み）でランダムな問題が発生しました。私が維持しているWebサイトでは、エラーメッセージに使用するアートワークを更新しており、Webkitベースのブラウザーを除くすべてのブラウザーで見栄えがします。Webインスペクターで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ブラウザで「MedicalExpenses」などの項目をクリックすると、間隔エラーのあるポップアップが表示されます。

4

2 に答える 2

1

これは完全な答えではありませんが、うまくいけば、正しい方向に向けるのに十分です。

Client.Popups.jsで、関数内で、このCreateOverlay行をコメントアウトすると、次のようになります。

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

奇妙なギャップはなくなりました。

したがって、私の提案は、オーバーレイコードを詳しく調べて書き直すことです。

于 2011-01-12T13:09:39.517 に答える
0

これは、フロート要素の上にある絶対位置要素が、絶対位置要素内での要素の流れに影響を与える可能性があると思われるフロートの問題が原因でした。

于 2011-06-30T11:48:46.927 に答える