下拉菜单在 Chrome 中显示正常，但在 Safari 中不显示（由图像覆盖）答案

【问题标题】：Dropdown Menu appears fine in Chrome but not in Safari (covered by image)下拉菜单在 Chrome 中显示正常，但在 Safari 中不显示（由图像覆盖）
【发布时间】：2020-05-03 03:15:55
【问题描述】：

导航下拉菜单在 Chrome 中运行良好，但在 Safari 中，菜单的其余部分被图像覆盖。为什么这只发生在 Safari 中？它在 Chrome 中显示得很好。

我尝试过的事情都无济于事：

插手 Z-index
尝试使用 position:relative 作为下拉菜单

添加到-webkit-transform

 
;(function(){function t(){}function e(t){return null==t?t===l?d:y:I&&I in Object(t)?n(t):r(t)}function n(t){var e=$.call(t,I),n=t[I];try{t[I]=l;var r=true}catch(t){}var o=_.call(t);return r&&(e?t[I]=n:delete t[I]),o}function r(t){return _.call(t)}function o(t,e,n){function r(e){var n=d,r=g;return d=g=l,x=e,v=t.apply(r,n)}function o(t){return x=t,O=setTimeout(c,e),T?r(t):v}function i(t){var n=t-h,r=t-x,o=e-n;return w?k(o,j-r):o}function f(t){var n=t-h,r=t-x;return h===l||n>=e||n<0||w&&r>=j}function c(){
    var t=D();return f(t)?p(t):(O=setTimeout(c,i(t)),l)}function p(t){return O=l,S&&d?r(t):(d=g=l,v)}function s(){O!==l&&clearTimeout(O),x=0,d=h=g=O=l}function y(){return O===l?v:p(D())}function m(){var t=D(),n=f(t);if(d=arguments,g=this,h=t,n){if(O===l)return o(h);if(w)return O=setTimeout(c,e),r(h)}return O===l&&(O=setTimeout(c,e)),v}var d,g,j,v,O,h,x=0,T=false,w=false,S=true;if(typeof t!="function")throw new TypeError(b);return e=a(e)||0,u(n)&&(T=!!n.leading,w="maxWait"in n,j=w?M(a(n.maxWait)||0,e):j,S="trailing"in n?!!n.trailing:S),
    m.cancel=s,m.flush=y,m}function i(t,e,n){var r=true,i=true;if(typeof t!="function")throw new TypeError(b);return u(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),o(t,e,{leading:r,maxWait:e,trailing:i})}function u(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function f(t){return null!=t&&typeof t=="object"}function c(t){return typeof t=="symbol"||f(t)&&e(t)==m}function a(t){if(typeof t=="number")return t;if(c(t))return s;if(u(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;
    t=u(e)?e+"":e}if(typeof t!="string")return 0===t?t:+t;t=t.replace(g,"");var n=v.test(t);return n||O.test(t)?h(t.slice(2),n?2:8):j.test(t)?s:+t}var l,p="4.17.5",b="Expected a function",s=NaN,y="[object Null]",m="[object Symbol]",d="[object Undefined]",g=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,O=/^0o[0-7]+$/i,h=parseInt,x=typeof global=="object"&&global&&global.Object===Object&&global,T=typeof self=="object"&&self&&self.Object===Object&&self,w=x||T||Function("return this")(),S=typeof exports=="object"&&exports&&!exports.nodeType&&exports,N=S&&typeof module=="object"&&module&&!module.nodeType&&module,E=Object.prototype,$=E.hasOwnProperty,_=E.toString,W=w.Symbol,I=W?W.toStringTag:l,M=Math.max,k=Math.min,D=function(){
    return w.Date.now()};t.debounce=o,t.throttle=i,t.isObject=u,t.isObjectLike=f,t.isSymbol=c,t.now=D,t.toNumber=a,t.VERSION=p,typeof define=="function"&&typeof define.amd=="object"&&define.amd?(w._=t, define(function(){return t})):N?((N.exports=t)._=t,S._=t):w._=t}).call(this);

// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => { 
    console.log('checkHeader');

    // Detect scroll position
    let scrollPosition = Math.round(window.scrollY);

    // If we've scrolled 130px, add "sticky" class to the header
    if (scrollPosition > 130){
        document.querySelector('header').classList.add('sticky');
    }
    // If not, remove "sticky" class from header
    else {
        document.querySelector('header').classList.remove('sticky');
    }
}, 300);

// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);

header{
    padding: 0px;
    overflow: hidden;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 120px;
    background-image: linear-gradient(to right, rgba(9, 9, 22, 0.6), rgba(9, 9, 22, 1.0));
}

 
main{
    margin-top: 120px;
}
 
header.sticky {
    background-color: black;
    height: 90px;
}

header.sticky nav{
    top: 30px;
}

header.sticky #logo{
    font-size: 3em;
    padding: 10px 0px 10px 10px;
}

header #logo{
    font-size: 5em;
    float: left;
}

.phi{
    color: rgb(141, 180, 105);
}
.hilo{
    color: white;
}

nav{
    float: right;
    position: fixed;
    top: 50px;
    left: 280px;
}
nav > a, .dropmenu{
    padding-left: 0.5em;
    padding-right: 0.5em;
}
nav a, .dropdown{
    color: rgb(240, 137, 52);
    font-size: 20px;
}

a{
    text-decoration: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ddd;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 21px 21px 21px 21px;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: rgb(247, 185, 71); 
    border-radius: 21px 21px 21px 21px;
}
.dropdown:hover .dropdown-content {display: block;}

.dropmenu:hover {
    cursor: pointer;
}

.universe {
    background-image: url("../assets/img/universe.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px;
    width: 100%;
    height: 25em;
    display: inline-block;
    z-index: -999;
}
blockquote{
    color: white;
    font-size: 4em;
    text-align: center;
    margin: 2em auto;
}
.bgbutton, .bottominfo{
    background-color: white;
}
.button{
    display: inline-block;
    border-radius: 4px;
    background-color: rgb(240, 137, 52);
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 40px;
    padding: 20px;
    transition: all 0.5s ease;
    cursor: pointer;
    margin: 50px 180px;
  }
.button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s ease;
}
.button span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s ease;
}
.button:hover span{
    padding-right: 25px;
}
.button:hover span:after{
    opacity: 1;
    right: 0;
}

<div class="wrapper">
        <header>
            <a href="index.html">
                    <div id="logo">
                            <span class="phi">&#934</span><span class="hilo">hilo</span>
                        </div>
            </a>
            <nav>
                <a href="index.html">HOME</a>
                <div class="dropdown">
                    <a class="dropmenu">INTERIOR DESIGN</a>
                    <div class="dropdown-content">
                        <a href="our-philosophy.html">OUR PHILOSOPHY</a>
                        <a href="our-innovation.html">OUR INNOVATION</a>
                        <a href="testimonials.html">TESTIMONIALS</a>
                    </div>
                </div>
                <a href="feng-shui.html">FENG SHUI</a>
                <div class="dropdown">
                    <a class="dropmenu">SERVICES</a>
                    <div class="dropdown-content">
                        <a href="space-planning.html">SPACE PLANNING</a>
                        <a href="fengshui-consultation.html">FENG SHUI CONSULTATION</a>
                        <a href="design-renovation.html">DESIGN & CARPENTRY</a>
                    </div>
                </div>
                <div class="dropdown">
                    <a class="dropmenu">OUR MASTERPIECE</a>
                    <div class="dropdown-content">
                        <a href="residential.html">RESIDENTIAL</a>
                        <a href="retail.html">RETAIL</a>
                        <a href="corporate-office.html">CORPORATE & OFFICE</a>
                    </div>
                </div>
                <div class="dropdown">
                        <a class="dropmenu">ABOUT</a>
                        <div class="dropdown-content">
                            <a href="chief-designer.html">CHIEF DESIGNER</a>
                            <a href="master-pek.html">MASTER PEK</a>
                            <a href="subsidiaries.html">OUR SUBSIDIARIES</a>
                            <a href="faq.html">FAQ</a>
                        </div>
                    </div>
                <a href="blog.html">BLOG</a>
            </nav>
        </header>
        <main>
            <div  class="universe">
            <section>
                <blockquote>Where Feng Shui Meets Design</blockquote>
            </section>
            </div>

【问题讨论】：

标签： javascript html css google-chrome safari

【解决方案1】：

我终于找到了问题并找到了解决方案。问题隐藏在标题部分。更改标题后 - 溢出：可见（从隐藏），导航栏中的下拉菜单现在在 Safari 中正确显示。 Safari 的呈现方式与 Chrome 如此不同的原因是深不可测的。

【讨论】：