当我注意到前端发生了一个很大的错误时,我刚刚在一个新网站的后端工作,而我却一直试图解决这个问题。
我有一个旧版本的网站,我一直在努力,并在新版本上移动和整理其余部分。然而,当我在iPhone上访问Safari浏览器时,尽管在旧网站上复制了网站页眉和页脚(包含相同的菜单),但它并没有正确地在新浏览器上加载下拉菜单。
当您按下菜单时,它将打开,然后立即关闭在iPhone上。但是chrome和firefox Web浏览器工作正常。我试图查看论坛并更改引导代码,但似乎没有任何工作。它只在响应式菜单下拉列表中执行。
奇怪的是,旧网站有全宽下拉菜单,新网站位于右侧(不是全宽),好像没有正确加载一样。
旧网站(工作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?> | Social Research Unit</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="<?php echo $keywords; ?>">
<meta name="description" content="<?php echo $description; ?>">
<link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon">
<link href="/inc/css/bootstrap.min.css" rel="stylesheet">
<link href="/inc/css/prettyPhoto.css" rel="stylesheet">
<link href="/inc/css/screen.min.css" rel="stylesheet" media="screen">
<link href="/inc/css/print.min.css" rel="stylesheet" media="print">
<!--[if lt IE 9]>
<script src="/inc/js/html5shiv.min.js"></script>
<script src="/inc/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/inc/js/jquery.min.js"></script>
</head>
<body>
<!-- HEADER START -->
<nav class="navbar navbar-fixed-top dartNavbar" role="navigation">
<div class="container">
<?php $lang->getLinks(); ?>
<div class="navbar-header">
<a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
Menu
</a>
<a class="navbar-brand dartNavbar-brand" href="/">
<div class="titleShapes">
<span class="DataUnit" title="Data Unit"></span>
<span class="WhatWorksUnit" title="What Works Unit"></span>
<span class="InnovationUnit" title="Innovation Unit"></span>
<span class="PlaceUnit" title="Place Unit"></span>
</div>
<img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse no-transistion">
<ul class="nav navbar-nav navbar-right">
<li<?php $if->active('about'); ?>>
<a href="/About/">About</a>
</li>
<li<?php $if->active('process'); ?>>
<a href="/methods/">Methods</a>
</li>
<li<?php $if->active('projects'); ?>>
<a href="/projects/">Projects</a>
</li>
<li<?php $if->active('resources'); ?>>
<a href="/resources/">Resource</a>
</li>
<li<?php $if->active('contact'); ?>>
<a href="/contact/">Contact</a>
</li>
<li class="youtube">
<a href="https://youtube.com/socialresearchunit" target="_blank">
<div class="icon"></div>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/socialresunit" target="_blank">
<div class="icon"></div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HEADER ENDS -->
<!-- CONTENT STARTS -->
<div class="content">
新网站(不工作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?> | Social Research Unit</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="<?php echo $keywords; ?>">
<meta name="description" content="<?php echo $description; ?>">
<link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon">
<link href="/inc/css/bootstrap.min.css" rel="stylesheet">
<link href="/inc/css/prettyPhoto.css" rel="stylesheet">
<link href="/inc/css/screen.min.css" rel="stylesheet" media="screen">
<link href="/inc/css/print.min.css" rel="stylesheet" media="print">
<!--[if lt IE 9]>
<script src="/inc/js/html5shiv.min.js"></script>
<script src="/inc/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/inc/js/jquery.min.js"></script>
<script type="text/javascript" src="/inc/js/bootstrap.min.js"></script>
</head>
<body>
<!-- HEADER START -->
<nav class="navbar navbar-fixed-top dartNavbar" role="navigation">
<div class="container">
<?php $lang->getLinks(); ?>
<div class="navbar-header">
<a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<div class="icon-bar icon-bar-top"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</a>
<a class="navbar-brand dartNavbar-brand" href="/">
<div class="titleShapes">
<span class="DataUnit" title="Data Unit"></span>
<span class="WhatWorksUnit" title="What Works Unit"></span>
<span class="InnovationUnit" title="Innovation Unit"></span>
<span class="PlaceUnit" title="Place Unit"></span>
</div>
<img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" class="hidden-xs hidden-sm" />
<img src="/inc/img/logo.full.notext.png" alt="Dartington Social Research Unit" class="hidden-md hidden-lg" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse no-transistion">
<ul class="nav navbar-nav navbar-right">
<li<?php $if->active('about'); ?>>
<a href="/about/">About</a>
</li>
<li<?php $if->active('methods'); ?>>
<a href="/methods/">Methods</a>
</li>
<li<?php $if->active('projects'); ?>>
<a href="/projects/">Projects</a>
</li>
<li<?php $if->active('resources'); ?>>
<a href="/resources/">Resource</a>
</li>
<li<?php $if->active('contact'); ?>>
<a href="/contact/">Contact</a>
</li>
<li class="youtube">
<a href="https://youtube.com/socialresearchunit" target="_blank">
<div class="icon"></div>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/socialresunit" target="_blank">
<div class="icon"></div>
</a>
</li>
<li class="search">
<a onClick="search()">
<div class="icon"></div>
<span>
<input type="text" id="search" data-search="Search" />
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HEADER ENDS -->
<!-- CONTENT STARTS -->
<div class="content">
答案 0 :(得分:0)
.navbar-right {position:absolute;}删除此样式。 - vel
这很有效,谢谢你!