Question

网页未在Safari中显示，但所有其他浏览器都正常呈现 - ＆gt; Firefox，Chrome（我不算IE，我不需要在IE中查看）。我只想知道为什么网页没有在Safari中显示。可能的原因是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One-Great-Thing</title>

<style>
body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

#image-slider {
    position: relative;
}

#image-slider > div {
    overflow: hidden;
}

#container {
    position: relative;
    overflow: hidden;
}
#container .content{
    position: absolute;
    top: 10%;
    left: 0;
    color: #000;
    text-align: center;
    width: 100%;
    font-size: 6em;
    padding: 80px 0px;
    font-weight: bold;
    background: rgba(255,255,255,0.6);
    text-shadow: 3px 3px rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
#container .content a{
    color: #000;
        font-family: 'myriad-std-tilt', sans-serif;
    text-decoration: none;
    font-size: 18px;
}

#container .content a.round img:hover{
 border: 3px solid #003366;
 border-radius: 50%;
}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    // IE detect
    function iedetect(v) {

        var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
        return r.test(navigator.userAgent);

    }

    // For mobile screens, just show an image called 'poster.jpg'. Mobile
    // screens don't support autoplaying videos, or for IE.
    if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

        (adjSize = function() { // Create function called adjSize

            $width = $(window).width(); // Width of the screen
            $height = $(window).height(); // Height of the screen

            // Resize image accordingly
            $('#container').css({
                'background' : 'url(ogt.png)', 
                'background-size' : 'cover', 
                'width' : $width+'px', 
                'height' : $height+'px'
            });

            // Hide video
            $('video').hide();

        })(); // Run instantly

        // Run on resize too
        $(window).resize(adjSize);
    }
    else {

        // Wait until the video meta data has loaded
        $('#container video').on('loadedmetadata', function() {

            var $width, $height, // Width and height of screen
                $vidwidth = this.videoWidth, // Width of video (actual width)
                $vidheight = this.videoHeight, // Height of video (actual height)
                $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

            (adjSize = function() { // Create function called adjSize

                $width = $(window).width(); // Width of the screen
                $height = $(window).height(); // Height of the screen

                $boxRatio = $width / $height; // The ratio the screen is in

                $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

                // Set the container to be the width and height of the screen
                $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 

                if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                    // Set the width of the video to the screen size multiplied by $adjRatio
                    $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
                } else {
                    // Else just set the video to the width of the screen/container
                    $vid = $('#container video').css({'width' : $width+'px'});
                }

            })(); // Run function immediately

            // Run function also on window resize.
            $(window).resize(adjSize);

        });
    }

});
</script>
</head>

<body>
<div id="container">
    <video autoplay loop muted style="width: 100%;" poster="ogt.png">
        <source src="OGT-home.ogv" type="video/ogg" />
        <source src="OGT-home.mp4" type="video/mp4">
        <source src="OGT-home.webm" type="video/webm">
    </video>
    <div class="content">
    <a class="round" href="index2.html"><img src="128x128.png"></a><br /><br />
    <a class="ytube" href="http://youtube.com/somelink">Watch Us On <br /><img src="images/ytube.png" /></a><br /><br />
        <a href="index2.html"> Enter Into The Website</a>
    </div>
</div>

</body>
</html>

以上是页面的代码。 BTW我不在这里提供所需的图像文件和视频文件，但我确保所有链接都是完美的，如在Firefox和Chrome中检查的那样。

我想提到的另一件事是，我发现如果我删除了内容块的绝对位置属性，那么它在Safari中完美地显示内容块（虽然视频没有显示，但我可能在某处找到了HTML5 autoplay无法在Safari上运行。

请为我提供Safari的解决方案。

Safari未显示网页

0 个答案: