Question

尝试显示一个nabber品牌形象。在Chrome / Safari / IE中运行良好，但在FF中运行不正常。当用户向上滚动时，品牌形象会增长。

http://sam-stone.co.uk/sam/

我尝试将图像设为静态，但也没有显示。有什么想法吗？

CSS：

.navbar-brand img {
    max-height: 0px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    margin-top: -75px;
    -webkit-filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
}
.shrink .navbar-brand img {
    max-height: 100px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

JS：

$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('shrink');
}
else {
$('.navbar').removeClass('shrink'); }
});

HTML：

<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#"><img src="images/logoCircle.png" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="navbar-top-right">
        <li>
        <form action="demo_form.asp">
        <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002; Search Blog" style="font-family:Arial, FontAwesome">
<br>
        </form>
        </li>
        <li><a href="#"><img src = "images/sample.png"> Samples (0 Samples)</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">PRODUCTS</a></li> 
        <li><a href="about.php">ABOUT</a></li> 
        <li><a href="#">SHOWCASE</a></li> 
        <li><a href="#">NEWS</a></li> 
        <li><a href="#">CONTACT</a></li> 
      </ul>

    </div>
  </div>
</nav>

Navbar品牌形象无法在firefox

0 个答案: