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

我将我的.center类的css更改为如下，它解决了问题：

.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%;

}

Answer 2

尝试将图片设置为use strict; use warnings; use 5.010; use autodie; my ($keyword_file, $data_file) = @ARGV; my $re = do { open my $fh, '<', $keyword_file; my %kw; /(\S+)/ and ++$kw{$1} while <$fh>; join '|', map quotemeta, sort { length $b <=> length $a } keys %kw; }; $re = qr/$re/; open my $fh, '<', $data_file; /$re/ and print while <$fh>;

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

2 个答案: