Chrome图片展示位置问题。 1px缓冲区？

时间：2017-06-05 18:01:28

标签： html css google-chrome pug opera

我很难解释这一点。但是，基本上，在谷歌浏览器中我遇到了一个问题，我将图像放在div的底部，并且有一个1px边框或“底部的缓冲区，我无法删除。”

这就是我所看到的！

铬： This is what happens in GC

歌剧： This is in Opera!!!!!

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

2 个答案:

答案 0 :(得分：0)

为了确保不添加额外的默认填充/边距（并且它在浏览器之间有所不同），请将其放在css的顶部

* {
  margin: 0;
  padding: 0;
}

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

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

希望这有帮助

答案 1 :(得分：0)

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

我花了一段时间才意识到我只是做了不好的代码。

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

我希望这是可以理解的。

相关问题
最新问题