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在我的圖像下顯示空白區域？

回答

相關問題