Question

我最近开始从事网页设计项目，并在 Chrome版本62.0.3202.75（官方版本）中遇到了几个与体型相关的问题。我已经让其他2个我知道的人复制了这个问题，他们都可以通过c9上的托管网站，以及本地使用与我相同的Chrome版本。在我测试的任何其他浏览器或操作系统中都不会发生这种情况。（Firefox，Firefox Developer Edition，Safari，Windows Chrome）。在这一点上，这是一场机会游戏。背景图像50％的时间加载在页面上，50％的时间不加载。

将background: url('') ...，background-color: ...或background-image: url('') ...添加到<body></body>代码可以正常，直到我添加<input>字段在页面上。添加后，身体样式完全消失，只有在我选择输入字段时才会重新显示。对于表单的submit按钮也会出现同样的情况，如果我选择“提交”按钮，则样式仅显示在正文上。

在html标记中添加样式似乎可以解决此问题，因此在打开<body>标记后立即添加整页内容包装并设置样式。 我得出的结论是，MacOS的这个特定Chrome版本有一个或多个错误，无法正确设置正文标记的样式，但我发现很难相信有几个原因。 1）没有其他浏览器有这个问题，2）我发现了一些关于类似问题的少数类似帖子，关于最近7年的身体造型问题，以及3）我访问过的成千上万的网站在这个特定的Chrome版本上，我不记得其中一个人曾经搞砸过造型。这让我觉得我的HTML / CSS不知怎么搞砸了，即使我在几年的网页设计中没有遇到过这个问题，或者我错过了网页设计PSA，Chrome for MacOS随机突破了一天，每个人都应该设置他们的HTML标签或创建一个单独的包装器。

我为此搜索了很多，并且未能找到关于这个特定问题的任何官方或非官方帖子，所以如果有人对此有所了解，我将非常感激。

如果你不想在本地测试，我在c9.io上有一个你可以查看的托管网站，虽然它可能不是百分之百的时间。

我也在css中尝试了其他解决方案，例如放置full/path/to/image/.png而不是../，并设置固定的背景颜色，似乎都不是解决方案。

我也尝试了各种reset.css文件，根本没有重置，问题仍然存在

c9：https://chrome-issue-slooth(dot)c9users(dot)io/index.html 一些在本地测试的代码：

<!DOCTYPE html>
<html>
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/app.css">
    <title>Register</title>
    </head>
    <body>
        <div class="register-block">
            <!-- Left Block -->
            <div class="rb-left">
                <!-- Form Wrapper -->
                <div class="form-wrap">
                    <!-- Signup Form -->
                    <form action="" method="POST">
                        <!-- Label -->
                        <p class="signup-label">SIGN UP FORM</p>
                        <!-- Form input Username -->
                        <input type="text" name="username" id="usernameField" placeholder="Username">
                        <input type="submit" value="Submit">
                    </form>
                </div>
                <!-- Bottom Block -->
                <div class="rb-bottom">
                    <p>Already have an account? <a href="/login">Login</a></p>
                </div>
            </div>
            <!-- Right Block -->
            <div class="rb-right"></div>
        </div>
    </body>
</html>

^这与以下css配对再现错误：

            /* normalize.css */            
            /* <snippet> */
            /* end of normalize.css */

    ul {
      -webkit-padding-start: 0px; }

    li {
      list-style: none; }

    p {
      margin: 0px; }

    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100vh;
      background-image: url("https://i.imgur.com/lNjufWn.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
      body .register-block {
        background: #233A48; }
        body .register-block .rb-left .form-wrap {
          padding: 45px 80px; }
        body .register-block .rb-left .rb-bottom {
          background: #1E323E;
          padding: 18px 0px; }
          body .register-block .rb-left .rb-bottom p a {
            display: inline-block; }

添加以下CSS片段是我找到的一个解决方案：

html, body {
      height: 100vh;
      background-image: url("https://i.imgur.com/lNjufWn.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }

MacOS Chrome Body Styling Bug

0 个答案: