Question

[根据我的老板请求删除了网址] - 请在第一条评论中查看屏幕截图，看看发生的错误。

检查该网站。出于某种原因，有时在加载登录页面时，我会在登录框后面出现一条暗条纹（这只会出现在Chrome和Safari中）。如果您没有看到它，请尝试Shift + Refresh几次。在任何地方单击表单或尝试检查元素似乎删除此黑盒子（通常，并非总是如此）。我认为这是因为我在尝试登录时在页面上显示了一个叠加层。但是，叠加层设置为display：none，因此不应该看到它。这使得页面在加载时看起来非常难看，所以如果我能删除它会很棒。非常感谢任何帮助！

Answer 1

所以我复制了你的CSS和HTML并制作了一个本地版本来解决这个问题。

以下是我为解决您的问题所采取的措施。

答：我在你的身体标签上设置了100％的明确高度（以防止任何裁剪或内容）

B：你的Body元素的边缘顶部被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-box CSS，但相关的行是210。

让我知道这对你有用。

Answer 2

我拆除了网站并解决了问题：

<!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>

在您的页面中，动画将应用于class="loading dead-center"的div。我最好的建议是尝试使用display: none;代替z-index: -1;来隐藏动画。

奇怪的webkit背景问题

2 个答案: