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

Question

我不明白为什么 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;
}

Answer 1

尝试将图像设置为 display: block