[英]Footer menu not showing in Safari
The site in question is: http://www.twisted-perfectionism.com 有问题的网站是: http : //www.twisted-perfectionism.com
I have this #secondary_nav which should appear at the bottom of the screen on mobile devices. 我有这个#secondary_nav应该出现在移动设备屏幕的底部。 It's working fine in both Firefox and Chrome, but in Safari it doesn't appear at all.
它在Firefox和Chrome中运行良好,但在Safari中它根本不显示。 Using Developer Tools I can see that it is placed correctly but it's invisible.
使用开发人员工具我可以看到它被正确放置但它是不可见的。 I'm a newbie.. Please help!
我是新手..请帮忙!
@media only screen and (max-width : 880px) { [...] #secondary_nav {
width: 100%;
height: 12px;
padding-top: 16px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: url(../images/trans.png) repeat;
}
#secondary_nav > ul {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
display: block;
}
#secondary_nav > ul > li {
width: auto;
display: block;
clear: none;
float: left;
list-style: none;
position: relative;
right: 50%;
}
#secondary_nav ul li ul {
left: 0;
margin-right: 0;
}
#secondary_nav ul li ul li a {
text-align: left;
} [...] }
The problem was fixed by removing: 通过删除修复问题:
overflow: auto;
The footer appears now, but on iOS, when scrolling down, the iOS bottom bard disappears and the footer doesn't come down until i take my finger off the display. 页脚现在出现,但在iOS上,当向下滚动时,iOS底部吟游诗人消失,页脚不会下降,直到我将手指从显示屏上移开。
See screenshot: http://s29.postimg.org/7r49yfzc7/Photo_17_05_14_02_06_16.png 见截图: http : //s29.postimg.org/7r49yfzc7/Photo_17_05_14_02_06_16.png
It wotks if you take out the overflow: auto in the style for #control, it's cutting of the #secondary_nav: 如果你拿出溢出的话就好了:在#control的样式中自动,它正在削减#secondary_nav:
#control {
width: 34%;
min-width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
overflow: auto; /* Take this out */
-webkit-box-shadow: 0px 1px 7px 0px rgba(00, 00, 00, .7);
box-shadow: 0px 1px 7px 0px rgba(00, 00, 00, .7);
background: url(images/trans.png) repeat;
}
As far as I can tell it doesn't mess up anything else either. 据我所知,它也不会弄乱任何其他东西。
On line 1068 of your stylesheet the #footer
is set to display: none
and there's nothing to override that on small screens. 在样式表的第1068行,
#footer
设置为display: none
并且没有什么可以在小屏幕上覆盖它。 (On desktop browsers, an inline style of display: block
is inserted.) (在桌面浏览器上,插入内联样式
display: block
。)
Can you show me you html markup? 你能告诉我你的HTML标记吗?
But by the way try this 但顺便试试这个
@media only screen and (max-width : 880px) {
#secondary_nav {
width: 100%;
height: 12px;
padding-top: 16px;
position: absolute; /* Try with absolute positioning*/
bottom: 0;
left: 0;
background: url(../images/trans.png) repeat;
}
}
Try to add this !important rule: 尝试添加这个!重要规则:
#control {
width: 34%;
min-width: 300px;
position: fixed !important;
top: 0!important;
bottom: 0 !important;
left: 0 !important;
z-index: 999 !important;
overflow: auto; /* Take this out */
-webkit-box-shadow: 0px 1px 7px 0px rgba(00, 00, 00, .7);
box-shadow: 0px 1px 7px 0px rgba(00, 00, 00, .7);
background: url(images/trans.png) repeat;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.