0
我一直在编码一个月，所以对不起，如果这有一个简单的答案，但我一直在寻找没有结果的日子。为什么我的Bootstrap轮播或jQuery代码在Safari中不起作用？
我已经建立了一个简单的练习网页，使用Bootstrap旋转木马作为页面背景和jQuery来使div（页面内容最终会出现）出现。当我在Chrome，Firefox和Opera中打开HTML文件时，页面可以正常工作，但是当在iPhone或iPad上的Safari中打开该文件时，指向div的链接不起作用（单击时不显示任何内容）以及Carousel根本不起作用，而是在页面下方出现四个单独的图像，并在页面底部显示简单的“上一页”和“下一页”链接。不幸的是，我无法测试桌面版Safari浏览器的页面。我觉得有一些简单的我很想念，但我无法弄清楚。提前致谢。下面是我的网站（CSS，HTML和jQuery）整个代码，这里是页面的的jsfiddle：https://jsfiddle.net/fh8pxqqt/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="icon" type="image/png" href="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"/>
<title>Alex Strohl</title>
<style>
#bg-wrapper {
position: relative;
}
/*Carousel Background*/
#carousel-bg {
width: 100%;
height: 100%;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
-webkit-object-fit: cover;
-o-object-fit: cover;
-moz-object-fit: cover;
}
/*Nav*/
nav {
}
ul {
height: 75px;
line-height: 50px;
background: rgba(255,255,255,0.4);
text-align: left;
padding: 10px;
z-index: 1;
position: absolute;
width: 100%;
}
ul:hover {
background: rgba(255,255,255,1);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul:not(:hover) {
background: rgba(255,255,255,0.4);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul img {
padding-right: 30px;
padding-left: 30px;
}
ul img:hover {
opacity: 0.5;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
ul img:not(:hover) {
opacity: 1;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
li {
color: rgba(0,0,0,1);
text-decoration: none;
}
.link:focus {
color: rgba(0,0,0,0.5);
text-decoration: none;
}
.link:hover {
text-decoration: none;
color: rgba(0,0,0,0.5);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
cursor: pointer;
}
.link:not(:hover) {
color: rgba(0,0,0,1);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
.link:click {
color: rgba(0,0,0,0.5);
}
li {
display: inline;
vertical-align: middle;
line-height: normal;
padding: 10px;
z-index: 1;
}
li img {
height: 50px;
width: auto;
}
/*adventures*/
#adventures-wrapper {
text-align: center;
}
.adventures {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*commissions*/
#commissions-wrapper {
text-align: center;
}
.commissions {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*book*/
#book-wrapper {
text-align: center;
}
.book {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*alex*/
#alex-wrapper {
text-align: center;
}
.alex {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*contact*/
#contact-wrapper {
text-align: center;
}
.contact {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*responsive design*/
@media (max-width: 1000px){
ul {
text-align: center;
}
}
</style>
</head>
<body>
<div id="bg-wrapper">
<!--Navbar-->
<div class="nav">
<ul>
<li><img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"></li>
<li class="link adventures-link">Adventures</li>
<li class="link commissions-link">Commissions</li>
<li class="link book-link">Book</li>
<li class="link alex-link">Alex</li>
<li class="link contact-link">Contact</li>
</ul>
</div>
<!--Adventures-->
<div id="adventures-wrapper">
<div class="adventures">
<h1>Adventures</h1>
</div>
</div>
<!--Commissions-->
<div id="commissions-wrapper">
<div class="commissions">
<h1>Commissions</h1>
</div>
</div>
<!--Book-->
<div id="book-wrapper">
<div class="book">
<h1>Book</h1>
</div>
</div>
<!--Alex-->
<div id="alex-wrapper">
<div class="alex">
<h1>Alex</h1>
</div>
</div>
<!--Contact-->
<div id="contact-wrapper">
<div class="contact">
<h1>Contact</h1>
</div>
</div>
<!--Carousel background-->
<div id="carousel-bg" class="carousel slide" data-ride="carousel" data-pause="false">
<!--Indicators-->
<ol class="carousel-indicators hidden">
<li data-target="#carousel-bg" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-bg" data-slide-to="1"></li>
<li data-target="#carousel-bg" data-slide-to="2"></li>
<li data-target="#carousel-bg" data-slide-to="3"></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264082/STROHL__MG_1150-Edit_wdcn2g.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264097/_ST_3667_ob8jtb.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264105/_ST_4081_yb2vdd.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264128/_ST_9411_h9ftou.jpg">
</div>
</div>
<!--Left and Right controls-->
<a class="left carousel-control hidden" href="#carousel-bg" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden" href="#carousel-bg" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
/*Link functionality*/
$(document).ready(function(){
$("#carousel-bg").click(function(){
$(".adventures, .commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".adventures-link").click(function(){
$(".adventures").toggle(500);
$(".commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".commissions-link").click(function(){
$(".commissions").toggle(500);
$(".adventures, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".book-link").click(function(){
$(".book").toggle(500);
$(".adventures, .commissions, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".alex-link").click(function(){
$(".alex").toggle(500);
$(".adventures, .commissions, .book, .contact").hide(500);
});
});
$(document).ready(function(){
$(".contact-link").click(function(){
$(".contact").toggle(500);
$(".adventures, .commissions, .book, .alex").hide(500);
});
});
</script>
</body>
能否请您创建一个[的jsfiddle（https://jsfiddle.net/）？ –
嗨 - 这是jsFiddle。我也将它添加到主帖子中。 - https://jsfiddle.net/fh8pxqqt/ – JamesDDavies
这并不完全清楚你需要诚实的问题，也许图像会有所帮助。您的上一个和下一个箭头不可见，因为您向他们应用了“隐藏”;请参阅响应式[公用程序]（https://getbootstrap.com/css/#responsive-utilities-classes），以下是[iPhone]（https://imgur.com/a/6Rh3q）的两个屏幕截图。另外，请务必检查您的控制台是否有任何错误。 – vanburen