Chrome 图片放置问题。 1px 缓冲区？

Question

我很难解释这个。但是，基本上，在 Google Chrome 我有一个问题，我将图像放在 div 的底部，并且有一个 1px 的边框或“我可以在底部的缓冲区”删除。

这是我看到的！

Chrome:

歌剧：

我希望 Chrome 看起来像 Opera 那样。

这是代码！

这是CSS
注意草率。该网站目前处于草稿阶段。

@media screen and (max-width: 450px) {
  * {
    padding: 0;
    margin: 0;
    outline: none;
  }

  .mmenu {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #aaa;
  }

  .mobileBody {
    z-index: 1;
    background-color: #fff;
  }

  .mhead {
    background-image: url(../img/head.jpg);
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .logo {
    margin: auto;
  }

  img.logoImg {
    width: 175px;
    height: auto;
    margin: auto;
    margin-top: 15px;
  }

  .mhead img.cut {
    margin: 0;
    margin-top: 1px;
    padding: 0;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
  }

  .card {
    background-color: #fff;
    width: 100%;
    height: auto;
  }

  .final {
    display: flex;

  }

  .flavImg {
    display: flex;
    justify-content: center;
    align-items:center;
    width: 45%;
  }

  .flavImg img {
     height: 80%;
     width: auto;
  }

  .flavDesc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .flavDesc h1 {
    font-size: 21pt;
    text-align: left;
    font-family: 'Dancing Script', cursive;
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 5px;
  }

  .flavDesc p {
    font-size: 11pt;
    text-align: left;
    font-family: 'Ledger', serif;
    line-height: 125%;
    -webkit-font-smoothing: subpixel-antialiased;
    margin-top: 5px;
  }

  .edit {
    display: none;
  }
}

这是翡翠。
注意草率。该网站目前处于草稿阶段。

doctype html
html
  head
    title Conecopia Gelato - Ice Cream The Italian Way!

    meta(name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA.  At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.")
    meta(name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market")
    meta(name="author" content="Anthony F. DeSante")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")

    link(href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet")

    link(rel="stylesheet" type="text/css" href="ast/css/index.css")

  body
    .computer
    .mobile
      .mmenu
        ul.mmainNav
          a(href="#")
            li Home
          a(href="#")
            li Flavors
          a(href="#")
            li Contact Us
          a(href="#")
            li About
        ul.mlowerNav
          a(href="#")
            li Home
        .msocialmedia
          //Social Media Icons Go Here.
      .mobileBody
        .mhead
          .logo
            img(src="./ast/img/logo.png").logoImg
          img(src="./ast/img/cut.png").cut
        .mWeekFlavs.dispHor
          .row
            .card
              .final
                .flavImg
                  img(src="./ast/img/icecream.png")
                .flavDesc
                  .flavName
                    h1 Flavor Name
                  .flavText
                    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
              .edit.ifAdmin
                form(method="post" action="#")
                  input(type="file" name="image" accept="image/*")
                  input(name="flavName" type="text" placeholder="Flavor Name" value="")
                  textarea(row="5" col="auto")
                  input(type="reset")
                  input(name="save" type="submit" value="Save")
          .statusBar
            span#head

        .mAllFlavs.dispHor
br
br
br
br
br
br
br

br
br
br
br
br

br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br

这是 HTML（通过 PrePros 处理） 不喜欢 Jade 的人可以来这里吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Conecopia Gelato - Ice Cream The Italian Way!</title>
    <meta name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA.  At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.">
    <meta name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market">
    <meta name="author" content="Anthony F. DeSante">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="ast/css/index.css">
  </head>
  <body>
    <div class="computer"></div>
    <div class="mobile">
      <div class="mmenu">
        <ul class="mmainNav"><a href="#">
            <li>Home</li></a><a href="#">
            <li>Flavors</li></a><a href="#">
            <li>Contact Us</li></a><a href="#">
            <li>About</li></a></ul>
        <ul class="mlowerNav"><a href="#">
            <li>Home</li></a></ul>
        <div class="msocialmedia">
          <!--Social Media Icons Go Here.-->
        </div>
      </div>
      <div class="mobileBody">
        <div class="mhead">
          <div class="logo"><img class="logoImg" src="./ast/img/logo.png"></div><img class="cut" src="./ast/img/cut.png">
        </div>
        <div class="mWeekFlavs dispHor">
          <div class="row">
            <div class="card">
              <div class="final">
                <div class="flavImg"><img src="./ast/img/icecream.png"></div>
                <div class="flavDesc">
                  <div class="flavName">
                    <h1>Flavor Name</h1>
                  </div>
                  <div class="flavText">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                  </div>
                </div>
              </div>
              <div class="edit ifAdmin">
                <form method="post" action="#">
                  <input type="file" name="image" accept="image/*">
                  <input name="flavName" type="text" placeholder="Flavor Name" value="">
                  <textarea row="5" col="auto"></textarea>
                  <input type="reset">
                  <input name="save" type="submit" value="Save">
                </form>
              </div>
            </div>
          </div>
          <div class="statusBar"><span id="head"></span></div>
        </div>
        <div class="mAllFlavs dispHor"></div>
      </div>
    </div>
  </body>
</html><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

因此，如果有人有办法删除 1px "buffer"，请发送！

Answer 1

为确保不添加额外的默认 padding/margins（并且它确实因浏览器而异）将其放在 css

的顶部

* {
  margin: 0;
  padding: 0;
}

这将消除所有默认的自动添加边距和填充。我将它添加到您的 css（我也删除了额外的 1px 边距，以及一些多余的 html/css）

得到 this 并且没有发现任何问题（我使用的是最新的 Chrome）

希望对您有所帮助

Answer 2

显然，我找到了解决方案...

我花了一段时间才意识到我只是在写糟糕的代码。

对于那些想知道的人，为了解决这个问题，我只是将 body 的整个 "body" 部分包装在一个名为 <div class="MobileBody"> (Everything except the head) </div> 的 div 中。然后我使用 pseudo-element ::before 并将背景设置为图像。在那之后，我所要做的就是弄乱对齐方式以及背景位置和大小来解决问题！[=12=]

我希望这是可以理解的。

Chrome 图片放置问题。 1px 缓冲区？

Chrome Image Placement Issue. 1px buffer?

html

css

opera

google-chrome

pug