[英]HTML/CSS Safari block not visible
I'm having a bit of a layout issue with Safari and can't seem to figure out what is going on.我在 Safari 上遇到了一些布局问题,似乎无法弄清楚发生了什么。
Case:案件:
Layout: fixed
top header and a fixed
sidebar stretching from top to bottom.布局: fixed
顶部标题和从上到下延伸的fixed
侧边栏。
The sidebar navigation has a hover element which is triggered using Javascript.侧边栏导航有一个使用 Javascript 触发的悬停元素。
Issue:问题:
When hovering over the nav bar the hover works, but the hovered item is not visible (check screenshot).当悬停在导航栏上时,悬停有效,但悬停的项目不可见(检查屏幕截图)。
Image of triggerd navigation item触发导航项的图像
This only happens in Safari, even in IE11 it works.这只发生在 Safari 中,即使在 IE11 中它也能工作。
Options tried:尝试的选项:
z-index
on the hovered item;悬停项目上的z-index
;ul
into a div
;将ul
更改为div
;background
to the item;为项目重新应用background
;overflow
to visible
on multiple items;将overflow
更改为在多个项目上visible
;opacity
to 'opened' navigation block.为“打开的”导航块添加了opacity
。html (not triggerd by Javascript): html(不是由 Javascript 触发):
<ul>
<li>
<a class="navigation--dropdown-trigger" href="#">
<svg class="icon navigation--icon">
<use href="#icon--user" xlink:href="#icon--user"/>
</svg>
<div class="navigation--text">Admin</div>
<svg class="icon navigation--dropdown-icon">
<use href="#icon--arrow" xlink:href="#icon--arrow"/>
</svg>
</a>
<ul>
<li><a href="{{ route('users.index') }}">Gebruikersbeheer</a></li>
</ul>
</li>
</ul>
html (triggerd by Javascript): html(由 Javascript 触发):
<ul>
<li>
<a class="navigation--dropdown-trigger open--dropdown" href="#">
<svg class="icon navigation--icon">
<use href="#icon--user" xlink:href="#icon--user"/>
</svg>
<div class="navigation--text">Admin</div>
<svg class="icon navigation--dropdown-icon">
<use href="#icon--arrow" xlink:href="#icon--arrow"/>
</svg>
</a>
<ul>
<li><a href="{{ route('users.index') }}">Gebruikersbeheer</a></li>
</ul>
</li>
</ul>
This runs the following css (using scss btw):这将运行以下 css(使用 scss btw):
&.navigation--dropdown-open ~ ul
{ display: block; }
Notes:笔记:
top:
value to the ul as well.当 Javascript 被触发时,它也会向 ul 添加一个top:
值。position: fixed
of the dropdown ul, it does appear inside the sidebar如果我删除position: fixed
的下拉 ul,它确实出现在侧边栏中left:
value from the dropdown.当从下拉列表中删除left:
值时,上面的屏幕截图也适用。My colleague found this on the Apple site (2014) with an example Fiddle, if you open it in Safari you can see the difference: http://jsfiddle.net/m287S/1/我的同事在Apple 网站 (2014) 上找到了一个示例 Fiddle,如果您在 Safari 中打开它,您可以看到不同之处: http : //jsfiddle.net/m287S/1/
Anyone have an idea why it's not visible?任何人都知道为什么它不可见?
Eventually figured out that Safari can't handle overflow
on absolute
positioned elements.最终发现 Safari 无法处理absolute
定位元素的overflow
。 So I've eventually ended up rewriting the main navigation, now it works.所以我最终最终重写了主导航,现在它可以工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.