- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在网站上使用 Bootstrap 3 创建了一个菜单。这个菜单在我测试过的每个浏览器和任何屏幕尺寸下都能正常工作。
除了 iOS 上的 Safari,菜单根本没有出现。
使用 CSS,我强制菜单容器填满宽度并达到 640 像素高。然后我可以看到菜单。所以问题似乎出在溢出上。
但是,父容器和祖父容器有一个累积的填充,这在任何浏览器(我测试过)中都没有区别,除了 iOS 上的 Safari。 这可以在第 2 个屏幕截图中看到。
澄清一些条款
菜单指的是<ul>
ID 为 header-menu
的元素.这在下面的屏幕截图中标记为红色。
父级指的是直系父级,类为navbar-ex1-collapse
.这在下面的屏幕截图中标记为蓝色。
重现问题
我终于能够通过添加 position: absolute;
在 Chrome 中重现同样的问题给 parent 。
截图
查看代码片段:
(function($){
$("#header-menu .menu-item-has-children > a, #header-menu .menu-item-has-children > span.after").on('click', function(e) {
e.preventDefault();
if( $(this).parent().hasClass('hide-sub') ){
$(this).parent().addClass("show-sub").removeClass("hide-sub");
}else{
$(this).parent().addClass("hide-sub").removeClass("show-sub");
}
});
$("#header-menu .close-menu-button > span.before").on('click', function(e) {
e.preventDefault();
if( $(this).parent().parent().parent().hasClass('hide-sub') ){
$(this).parent().parent().parent().addClass("show-sub").removeClass("hide-sub");
}else{
$(this).parent().parent().parent().addClass("hide-sub").removeClass("show-sub");
}
});
})(jQuery);
@charset "utf-8";
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#header-menu {
float: right
}
@media (max-width: 991px) {
.navbar-default .navbar-toggle {
background: rgba(255, 255, 255, 0.05);
border: 0 none;
border-radius: 0
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #d23479
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d23479
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
background: rgba(255, 255, 255, 0.25);
border: 0;
box-shadow: none
}
.navbar-collapse {
margin-top: 10px
}
}
@media(max-width:991px) {
.navbar-nav>li>a {
line-height: 70px;
}
.nav>li {
font-size: 35px;
}
.navbar-nav {
width: 100%;
text-align: center;
margin: 0px;
}
}
/*meny*/
@media (min-width: 992px) {
#header-menu .only-mobile,
#header-menu a span {
display: none !important;
}
#header-menu > li {
position: static;
}
#header-menu > li > a {
display: inline-block;
}
#header-menu > li > a:active {
color: #d23479;
}
#header-menu > li > a:focus {
color: white;
}
#header-menu > li > ul.sub-menu {
display: block;
background-color: white;
padding: 30px;
width: 100%;
height: 100vh;
min-height: 640px;
max-height: 768px;
position: absolute;
z-index: 100;
left: 0;
}
#header-menu > li > ul.sub-menu > li {
display: table;
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu {
display: table-row;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li {
display: table-cell;
width: 25%;
padding: 15px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:first-of-type {
padding: 15px 15px 15px 0;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:last-of-type {
padding: 15px 0 15px 15px;
}
#header-menu > li > ul.sub-menu > li.sub-menu-row:first-of-type > ul.sub-menu > li a {
display: block;
padding: 5px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
font-size: 14px;
color: black;
border-width: 0 0 1px 0;
border-style: solid;
margin: 0 0 10px 0;
font-weight: 600;
border-color: #d23479;
text-transform: uppercase;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li {
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: gray;
font-size: 12px;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu-row:nth-of-type(2) {
margin-top: 50px;
border-width: 1px 0 0 0;
border-color: lightgray;
border-style: solid;
}
#header-menu .sub-menu-row:nth-of-type(2) > ul.sub-menu > li > a {
text-transform: none;
font-weight: 300 !important;
border: none;
}
#header-menu .contact a {
color: #d23479 !important;
}
#header-menu [class*="icon-"]:before {
font-size: 26px;
color: #d23479;
float: left;
margin: 0 10px;
position: relative;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu > .menu-item-has-children.hide-sub > span.after:before {
content: '';
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/DropDown-Arrow.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 15px;
height: 15px;
}
#header-menu > .menu-item-has-children.show-sub > span.after:before {
background: none;
content: '×';
font-size: 27px;
font-weight: 300;
line-height: 1.2em;
font-family: serif;
vertical-align: middle;
color: #d23479;
}
#header-menu > .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu > .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu .sub-menu .close-menu-button {
display: block;
position: absolute;
bottom: 130px;
}
#header-menu .sub-menu .close-menu-button span.before {
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
cursor: pointer;
}
#header-menu .sub-menu .close-menu-button span.before:before {
content: '×';
color: #d23479;
font-size: 42px;
font-family: serif;
font-weight: bold;
line-height: 32px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header-menu .sub-menu .close-menu-button span.before:after {
content: 'Lukk meny';
text-transform: uppercase;
color: #ccc;
font-size: 12px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
@media (max-width: 991px) {
#header-menu button.navbar-toggle {
display: inline-block;
width: 42px;
height: 32px;
background-color: #d23479;
position: absolute;
top: 15px;
right: 30px;
}
#header-menu button.navbar-toggle:before {
content: '×';
color: white;
font-family: serif;
font-size: 32px;
vertical-align: top;
line-height: 16px;
}
#header-menu {
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
z-index: 10;
overflow: scroll;
margin-top: 0;
padding: 102px 20px 20px 20px;
}
#header-menu .only-computer {
display: none !important;
}
#header-menu > li,
#header-menu .sub-menu li {
text-align: left;
border-top: 1px solid #ccc;
}
#header-menu .show-sub > ul.sub-menu {
border-top: 1px solid #ccc;
}
#header-menu a {
display: inline-block;
line-height: 1.4em;
text-transform: uppercase;
font-weight: 400;
padding: 0;
color: #222;
font-size: 18px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > a {
color: #444;
font-size: 15px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: #666;
font-size: 13px;
font-weight: 300;
}
#header-menu > li > a:active,
#header-menu > li.show-sub > a {
color: #d23479;
}
#header-menu ul.sub-menu {
padding-left: 15px;
}
#header-menu .menu-item-1350 > .sub-menu {
padding: 0;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu > li:first-of-type,
#header-menu .sub-menu-row,
#header-menu .bottom-contact-info,
#header-menu .bottom-contact-info li {
border: none !important;
}
#header-menu .menu-item-has-children.hide-sub span {
display: none;
}
#header-menu .menu-item-has-children.hide-sub > a {} #header-menu .menu-item-has-children > a {
width: 100%;
display: inline-block;
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 98% 50%;
}
#header-menu .menu-item-has-children.hide-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/down-arrow-menu.png');
}
#header-menu .menu-item-has-children.show-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/right-arrow-menu.png');
}
#header-menu .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu > li:first-of-type,
#header-menu .bottom-contact-info > .sub-menu {
border-top: 1px solid #d23479;
padding: 0;
}
#header-menu .bottom-contact-info a {
color: #333;
}
#header-menu [class*="icon-"]:before {
font-size: 20px;
color: #d23479;
margin: 0 10px;
position: relative;
text-transform: none;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu .inactive > a,
#header-menu .inactive > span,
#header-menu a span {
display: none;
}
#header-menu .logo {
position: absolute;
top: 10px;
left: 30px;
border: 0;
}
#header-menu .logo > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/images/logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 34px;
width: 167px;
}
}
/* Fixing the menu for Safari on iOS */
.dropdown-backdrop {
position: static !important;
}
.navbar-ex1-collapse {
z-index: 99999;
}
.collapse.in {
background-color: white;
width: 100%;
height: 640px;
position: fixed;
display: block;
overflow: scroll;
position: static !important;
}
#header-menu {
z-index: 99999 !important;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul id="header-menu" class="nav navbar-nav main_menu">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"></button>
<li id="menu-item-956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-956"><span class="before"></span><a href="#prosjekter">Prosjekter</a><span class="after"></span>
</li>
<li id="menu-item-1502" class="hide-sub menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1502"><span class="before"></span><a href="#tjenester">Tjenester</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1350" class="sub-menu-row inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1350"><span class="before"></span><a href="#"><span>Undermeny</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1317" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1317"><span class="before"></span><a href="#">Nettsteder</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1503"><span class="before"></span><a href="#responsiv-hjemmeside">Responsiv Hjemmeside</a><span class="after"></span>
</li>
<li id="menu-item-1504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1504"><span class="before"></span><a href="#nettbutikk">Nettbutikk</a><span class="after"></span>
</li>
<li id="menu-item-1318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1318"><span class="before"></span><a href="#landingsider">Landingsider</a><span class="after"></span>
</li>
<li id="menu-item-1332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1332"><span class="before"></span><a href="#">WordPress</a><span class="after"></span>
</li>
<li id="menu-item-1333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1333"><span class="before"></span><a href="#">Webdesign</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1314" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1314"><span class="before"></span><a href="#">Synlighet</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1505"><span class="before"></span><a href="#google-annonsering">Google Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1335" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1335"><span class="before"></span><a href="#">Facebook Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1316"><span class="before"></span><a href="#sokemotoroptimalisering">Søkemotoroptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1507"><span class="before"></span><a href="#fa-flere-henvendelser">Få flere henvendelser</a><span class="after"></span>
</li>
<li id="menu-item-1315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1315"><span class="before"></span><a href="#konverteringsoptimalisering">Konverteringsoptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1509"><span class="before"></span><a href="#forbedring-av-innhold">Forbedring av Innhold</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1338" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1338"><span class="before"></span><a href="#">Hosting</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1500"><span class="before"></span><a href="#hosting">Webserver / Webhotell/ E-post</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1340" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1340"><span class="before"></span><a href="#">Support</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1341" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1341"><span class="before"></span><a href="#">Driftsstatus server</a><span class="after"></span>
</li>
<li id="menu-item-1342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1342"><span class="before"></span><a href="#">Support</a><span class="after"></span>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1349" class="sub-menu-row inactive only-computer menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1349"><span class="before"></span><a href="#"><span>Kontaktinfo PC</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1344" class="contact inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-1344"><span class="before"></span><a href="#">Kontakt oss:</a><span class="after"></span>
</li>
<li id="menu-item-1345" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1345"><span class="before"></span><a href="tel:+4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1346" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1346"><span class="before"></span><a href="mailto:mail@example.com">mail@example.com</a><span class="after"></span>
</li>
<li id="menu-item-1347" class="icon-mapmarker menu-item menu-item-type-custom menu-item-object-custom menu-item-1347"><span class="before"></span><a href="#">Company address, 9999 Ziptown</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1528" class="only-computer close-menu-button menu-item menu-item-type-custom menu-item-object-custom menu-item-1528"><span class="before"></span><a href="#"><span>Lukk meny</span></a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><span class="before"></span><a href="#hvem-er-box-media">Hvem er Box Media</a><span class="after"></span>
</li>
<li id="menu-item-1501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1501"><span class="before"></span><a href="#aktuelt">Aktuelt</a><span class="after"></span>
</li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><span class="before"></span><a href="#kontakt-oss">Kontakt oss</a><span class="after"></span>
</li>
<li id="menu-item-1527" class="bottom-contact-info only-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1527"><span class="before"></span><a href="#"><span>Kontaktinfo mobil</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1522" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1522"><span class="before"></span><a href="tel:++4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1523" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1523"><span class="before"></span><a href="mailto:mail@example.com">mail@example.com</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1525" class="logo only-mobile menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-36 current_page_item menu-item-1525"><span class="before"></span><a href="#"><span>Hjem</span></a><span class="after"></span>
</li>
</ul>
</div>
</nav>
最佳答案
尝试明确地将导航栏定位设置为相对定位。 iOS 上的 Safari 定位元素似乎反复出现错误。
关于ios - 菜单内容不会溢出它在 iOS 的 Safari 中的父项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39436200/
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时,都会触发一些断点,并且我会被重定向到“源代码”选项卡,并显示消息“调试器已暂停”。问题是我没有设置任何断点,至少是有意的,这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的,似乎在大多数浏览器中都能正常工作,除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果? 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到,除了 safari,它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢? 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案,但似乎没有任何效果,如果可以避免的话,我真的不想使用 hack。 当我将 line-height 设置为垂直居中时,我的导航栏在任何地方都居中,但在 safari 中,它的
在输入字段中输入时,safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易,但事实并非如此! 我需要打开 safari,然后以全屏模式打开谷歌,然后隐藏工具栏。 这将是以下示例的等效项,但对于
嗨, friend 们,我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时,会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号? 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点,如果有,它是什么? 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”,可以在您输入网址时预加载页面。 现在对于大多数用户来说,这确实是一项功能,可以加快页面加载速度。但是对于 Web 开发人员来说,它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序,它不应该被公众访问(但),但我们不想实现自定义解决方案来防止这种情况发生,因此我们求助于 HTTP 基本身份验证,它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时,该值对于屏幕来说太长了,复制该行只会复制该值的可见部分。有没有办法看到整条线? 最佳答
出于开发目的,我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中,这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中,我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发,但我不确定它是否是开源项目?我知道 webkit 是开源的,但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件,但他们的回复不是很及时,所以我想知
我有一个正确的/etc/hosts 文件,其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀!