0

[上司のリクエストによりURLが削除されました]-発生していたバグを確認するには、最初のコメントのスクリーンショットをご覧ください。

そのサイトをチェックしてください。何らかの理由で、ログインページを読み込むときに、ログインボックスの後ろに暗い縞模様が表示されることがあります（これはChromeとSafariでのみ表示されます）。表示されない場合は、Shift+Refreshを数回試してください。フォーム内の任意の場所をクリックするか、要素を調べようとすると、この暗いボックスが削除されるようです（通常は常にではありません）。ログインしようとしたときにページにオーバーレイが表示されているためだと思います。ただし、オーバーレイはdisplay：noneに設定されているため、表示できないはずです。これにより、読み込み時にページが非常に見苦しく見えるので、削除できれば素晴らしいと思います。どんな助けでも大歓迎です！

4

2 に答える 2

3

そこで、CSSとHTMLをコピーして、これを解決するためにローカルバージョンを作成しました。

これがあなたの問題を解決するために私がしたことです。

A：ボディタグに明示的な高さを100％に設定しました（トリミングやコンテンツを防ぐため）

B：Section要素のマージントップは、Body要素によってマージまたは継承されています（用語が何であるかはよくわかりません）。だから私はmargin-top：0を設定しました。section.login-formに、「padding-top：45px;」と入力します。体に直接。

要約すると、これは私が使用したCSSです

    body {
      background: url("login-bg.jpg") repeat-x scroll center top #2b87ae;
      color: #5c5e5e;
      font-family: 'OpenSansBold', sans-serif;
      height: 100%;
      padding-top: 45px;
    }

    body section.login-box {
      margin: 0 auto;
    }

すべての.login-boxCSSを含めませんでしたが、適切な行は210です。

それがどのように機能するか教えてください。

于 2012-05-15T01:27:20.083 に答える
0

私はウェブサイトを解体し、問題を切り分けました：

<!doctype html>
<html>
    <head>
    <style>
      @-webkit-keyframes spin {
        100% { -webkit-transform:rotate(100deg); }
      } 

      body {
        background-image: url("login-bg.jpg");
      }

      div {
        z-index: -1;
        position: absolute;
        -webkit-animation: spin 0.7s linear infinite; 
      }

      </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

ページでは、アニメーションは。を使用してdivに適用されclass="loading dead-center"ます。私の最善の提案は、アニメーションを非表示にするdisplay: none;代わりにを使用してみることです。z-index: -1;

于 2012-05-15T02:17:24.610 に答える