负边距上方在Chrome中无效

Question

我使用Bootstrap创建了一个透明的导航栏，并在图像上添加了一个margin-top: -100px的CSS值，以便它显示在导航栏下方。在IE中可以正确渲染：

但由于某种原因，Chrome不识别负margin-top：

我的HTML略微复杂，但必须保持这样（由于各种原因）：

<div class="hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

我的CSS代码如下：

/* NAVIGATION */

 #custom-bootstrap-menu.navbar {
   margin-bottom: 0px !important;
 }

 #custom-bootstrap-menu.navbar-default .navbar-brand {
    color: black;
}

#custom-bootstrap-menu.navbar-default {
    font-size: 18px;
    font-family: $font-typewriter;
    background-color: $transparent-white !important;
    border: none;
    border-radius: 0px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: black;
    background-color: $transparent-black !important;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: black !important;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background: black !important; 
}


/* HEROS */

.hero-image-row {
   margin-top: -50px !important;
   overflow-x: hidden !important;
   width: 100% !important;
 }

.hero-image-outer {
   width: 300%;
   height: 400px;
   overflow-y: hidden !important;
 }

 .hero-image-inner {
   width: 66%;
   overflow-x: hidden !important;
 }

 .hero-image {
   height: 400px;
   margin-left: -50%;
   z-index: 0 !important;
 }

 @media screen and (min-width: 700px) {
   .hero-image-outer {
     width: 100%;
   }

   .hero-image-inner {
     width: 100%;
     height: 400px;
   }

   .hero-image {
     width: 100%;
     height: auto;
     margin-left: 0%;
   }
 }

 .overlap-hero-image {
   margin-top: -300px;
   height: 300px;
 }

 .height-auto {
   height: auto !important;
 }

有人可以帮我诊断Chrome在这里为什么出问题吗？我在其他网站上使用类似的代码从未遇到过问题。我已经尝试了有和没有透明度的SCSS变量，所以我知道那不是问题。真的是与margin有关的问题。

添加的导航栏代码：

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="/">The Manly Art of BBQ</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/products">Man Rules</a></li>
        <li><a href="/about-us">BBQ</a></li>
        <li><a href="/contact">My Mancard</a></li>
      </ul>
    </div> <!-- collapse -->
  </div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->

- Liz

Answer 1

使用WebKit。

在您当前的边距代码后添加以下代码。

-webkit-margin-before: -100px;

- Samuel Davidson

---

仍然没有改变，使用.hero-image-row {margin-top: -100px !important; -webkit-margin-before: -100px !important;}。我已经尝试过带和不带!important的方式。 - Liz

检查元素并在其CSS下的“计算”选项卡中查看其margin-top设置为什么。它可能设置为某个不是“-100px”的值，然后您可以确定是什么导致它无法向上定位。 - Samuel Davidson

计算出的选项卡显示为“-100px”，在IE中正常工作。 - Liz

Answer 2

我最终使用以下方法来修复顶部导航栏，将其从页面流中移除：

#custom-bootstrap-menu {
  position: absolute;
  width: 100%;
}

- Liz

---

这并没有回答问题本身，你只是找到了另一种方法。我面临着类似的问题，在任何情况下都无法用position: absolute解决。 - Pepelius

Answer 3

您还需要将以下 CSS 添加到要应用负边距的元素中：

vertical-align: top;

这很简单！

针对您的具体示例：

.hero-image-row {
   margin-top: -50px !important;
   overflow-x: hidden !important;
   width: 100% !important;
   vertical-align: top;
 }

- ejntaylor

Answer 4

我有一些代码给你，将下面的代码复制到你的测试HTML页面中并查看输出。 希望这能正常工作。

.navbar-default{
  background:rgba(255,255,255, 0.4);
  background-image:none;
  border-color: transparent;
}
.navbar-default .navbar-nav>li>a{
  color: #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

  
    <img src="http://feelgrafix.com/data/wallpaper-hd/Wallpaper-HD-16.jpg" class="img-responsive first-slide" alt="First slide">

- Vishal Panara

---

...如果我希望当用户向下滚动时它消失怎么办？ - Liz