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

【问题标题】：Chrome Image Placement Issue. 1px buffer?Chrome 图片放置问题。 1px 缓冲区？
【发布时间】：2017-06-05 18:01:28
【问题描述】：

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

这就是我看到的！

铬：

歌剧：

我希望 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;
  }
}

这是 Jade。
注意马虎。该网站目前处于草稿阶段。

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“缓冲区”，请发送！

【问题讨论】：

去掉这个：margin-top: 1px;
@Korgrue 没有任何改变。

标签： html css google-chrome pug opera

【解决方案1】：

为了确保没有添加额外的默认填充/边距（并且它确实因浏览器而异），请将其放在 css 的顶部

* {
  margin: 0;
  padding: 0;
}

这将摆脱任何默认的自动添加边距和填充。我将此添加到您的 css 中（我还删除了额外的 1px 边距，以及一些多余的 html/css）

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

希望对你有帮助

【讨论】：

顺便说一句，有关设置边距和填充速记的提示，请参阅w3schools.com/cssref/pr_margin.asp

【解决方案2】：

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

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

对于那些想知道的人，为了解决这个问题，我只是将我身体的整个“身体”部分包裹在一个名为 <div class="MobileBody"> (Everything except the head) </div> 的 div 中。然后我使用了伪元素::before 并将背景设置为图像。在那之后，我所要做的就是弄乱对齐以及背景位置和大小以使其正常工作！

我希望这是可以理解的。

【讨论】：