Safari在我的图像下显示空白区域？

我不明白为什么Safari会在本网站上的图像底部添加一个空白区域。Safari在我的图像下显示空白区域？

它在Firefox和Chrome中正确渲染。图像应该固定在页面的底部，包括调整大小时。

下面是一些HTML

<!-- Page Content --> 
<div class="container-fluid"> 


    <div class="span12"> 

     <div id="headImage"> 

      <img class="center fit" src="images/Dale2.png" onmousedown='return false;' ondragstart='return false;'> 
     </div> 

    </div> 

    <!-- ./container --> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript" language="JavaScript"> 
     function set_body_height() { // set body height = window height 
      $('body').height($(window).height()); 
     } 
     $(document).ready(function() { 
      $(window).bind('resize', set_body_height); 
      set_body_height(); 
     }); 


     $('img').bind('contextmenu', function (e) { 
      return false; 
     }); 


     $(document).ready(function() { 
      $(".center").hover(function() { 
       $(this).attr("src", "images/DaleBlurWithText.png"); 
      }, function() { 
       $(this).attr("src", "images/Dale2.png"); 
      }); 
     }); 
    </script> 

</body>

和CSS

body { 
max-height:100%; 
min-height: 100%; 
background-color: white; 
padding-top: 50px; 
overflow: hidden; 
-webkit-overflow-scrolling: touch; 
} 

.navbar { 
background: white; 
border: none; 
} 

.navbar-brand nav navbar-nav { 
text-align: center; 
} 

.navbar .navbar-nav { 
display: inline-block; 
float: none; 
vertical-align: top; 
margin: 0; 
} 

.navbar navbar-collapse { 
text-align: center; 
} 

* { 
padding: 0; 
margin: 0; 
} 

.fit { 
/* set relative picture size */ 

max-width: 100%; 
max-height: 100%; 
} 

.center { 
display: block; 
margin: auto; 
bottom-fixed: 0; 
vertical-align: bottom; 
}

来源

2015-07-12 FrasKyl

请提供减少的测试用例。有关更多信息，请参阅https://css-tricks.com/reduced-test-cases/。 –

只是好奇......这是什么？ 'bottom-fixed：0;' –

@Paulie_D将图像固定到底部，但我认为如果你问它是什么，它不会这样做haha – FrasKyl

我改变了我的CSS我.center类如下所示，解决了这个问题：

.center { 
    display: block; 
    position:fixed; 

    /* Center the image */ 
    right: 0; 
    left: 0; 

    margin-right: auto; 
    margin-left: auto; 
    bottom: 0; 
    /* set relative picture size */ 
    max-width: 100%; 
    max-height: 90%; 

}

来源

2015-07-13 21:36:56 FrasKyl

试将您的图片设置为display: block

来源

2015-07-13 22:42:22 ded

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 – Jost

是的。它可能不是请求者寻找的答案，但根据我的经验，这一直固定我的“我的形象下的空白空间”问题。这是几年来已知的解决方案。 – ded

嘿@ded，感谢您的建议，但我原来的Css我已经有显示：块，我发布的答案解决了我的问题。不知道它是否会帮助别人，但对我来说有些诡计。再次感谢您花时间回答 – FrasKyl

Safari在我的图像下显示空白区域？

回答

相关问题