Microsoft Edge 上的菜单项消失答案

【问题标题】：Menu items disappear on Microsoft EdgeMicrosoft Edge 上的菜单项消失
【发布时间】：2018-11-29 16:29:24
【问题描述】：

我刚刚在 Microsoft Edge 浏览器中打开了我的 Wordpress 网站，我注意到一些菜单链接丢失了。当我切换分辨率（不同的屏幕）时，不同的菜单项会消失，而之前消失的菜单项会再次出现。不知道为什么会这样，但这是 HTML 代码：

<section data-id="b5900dc" class="elementor-element elementor-element-b5900dc elementor-section-stretched elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-top elementor-section-content-top elementor-section elementor-top-section" id="headermedium" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;}}" data-element_type="section" style="width: 1617px; left: 0px;">
                        <div class="elementor-container elementor-column-gap-no">
                <div class="elementor-row">
                <div data-id="51e9713" class="elementor-element elementor-element-51e9713 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="8ac116e" class="elementor-element elementor-element-8ac116e elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="1514061" class="elementor-element elementor-element-1514061 phone elementor-widget elementor-widget-text-editor" id="phone" data-element_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><img class="facebook" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <img class="email" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> &nbsp;<span style="color: #61f6ff;">|&nbsp;</span><a style="color: #001a71;" href="tel:052-6582643">&nbsp;052-6582643</a></div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="9ab21fe" class="elementor-element elementor-element-9ab21fe elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="708fd7b" class="elementor-element elementor-element-708fd7b elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="cbeafe4" class="elementor-element elementor-element-cbeafe4 menu-item elementor-widget elementor-widget-heading" id="menu-contact" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#contact"><p dir="rtl"><span class="menu-item-text">צור קשר</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>        </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="a13b244" class="elementor-element elementor-element-a13b244 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="7ee7b62" class="elementor-element elementor-element-7ee7b62 elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="ab1e386" class="elementor-element elementor-element-ab1e386 menu-item elementor-widget elementor-widget-heading" id="menu-solutions" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#thesolutions"><p dir="rtl"><span class="menu-item-text">פתרונות</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>       </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="9142891" class="elementor-element elementor-element-9142891 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="3b2d009" class="elementor-element elementor-element-3b2d009 elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="cab712b" class="elementor-element elementor-element-cab712b elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#fit"><p dir="rtl"><span class="menu-item-text">למי זה מתאים?</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>      </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="ca1c2c7" class="elementor-element elementor-element-ca1c2c7 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="d9d4733" class="elementor-element elementor-element-d9d4733 elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="a80d715" class="elementor-element elementor-element-a80d715 menu-item elementor-widget elementor-widget-heading" id="menu-about" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#aboutus"><p dir="rtl"><span class="menu-item-text">אודות</span><span style="font-family: Heebo, sans-serif; font-size: 1.68em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>       </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="a517ba3" class="elementor-element elementor-element-a517ba3 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="a7babfa" class="elementor-element elementor-element-a7babfa elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="95cd8d5" class="elementor-element elementor-element-95cd8d5 menu-item elementor-widget elementor-widget-heading" id="menu-regulation" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation"><p dir="rtl"><span class="menu-item-text">מהי רגולציה?</span><span style="font-family: Heebo, sans-serif; font-size: 1.68em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>     </div>
                </div>
                        </div>
            </div>
        </div>
                <div data-id="fedcaa1" class="elementor-element elementor-element-fedcaa1 elementor-column elementor-col-14 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="ccc474c" class="elementor-element elementor-element-ccc474c elementor-widget elementor-widget-global elementor-global-1281 elementor-widget-html" data-element_type="html.default">
                <div class="elementor-widget-container">
            <script src="https://cdn.enable.co.il/licenses/enable-L2054rm82dp9sv1-0618-4722/init.js"></script>      </div>
                </div>
                <div data-id="5ab854b" class="elementor-element elementor-element-5ab854b elementor-widget elementor-widget-global elementor-global-1284 elementor-widget-html" data-element_type="html.default">
                <div class="elementor-widget-container">
            <script>
jQuery( document ).ready(function() { 
jQuery('.menu-item-text').on('click',function(){ jQuery('.menu-item-text').removeClass('active'); jQuery(this).addClass('active'); }); 
});

</script>

            </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>

这是 CSS：

#menu-contact, #menu-solutions, #menu-about, #menu-regulation, #menuu { 
text-decoration: none; 
color: #0B1B70; 
justify-content: center;
display: inline-block;
min-width: 60px;
max-width: 235.97px;
white-space: nowrap;
position: relative;
width: 100%;
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}
#menu-contact:hover .menu-item-text, 
#menu-contact:focus .menu-item-text, 
#menu-contact:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-solutions:hover .menu-item-text, 
#menu-solutions:focus .menu-item-text, 
#menu-solutions:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-about:hover .menu-item-text, 
#menu-about:focus .menu-item-text, 
#menu-about:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-regulation:hover .menu-item-text, 
#menu-regulation:focus .menu-item-text, 
#menu-regulation:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}


@media (min-width: 1280px) {
  #menu-contact {

    }
}
    @media (max-width: 1280px) {
  #menu-solutions {
            left: 15px;
    }
}
@media (max-width: 1280px) {
  #menu-regulation {
      left: 30px;
}
}

    @media (max-width: 1280px) {
  #menu-about {
      left: 35px;
    }
    }
       @media (max-width: 1280px) {
  #menuu {
          left: 30px

    }
       }

@media (max-width: 1279px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding (0, 20px, 0, 0)
  }
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
right: ;       }

@media (min-width: 769px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding: 0px 15px 0px 0px;
    }
}
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
margin-left: 0px;
    }
       }

              @media screen and (min-device-width: 1680px) 
              and (max-device-width: 1919px) 
           {
  #menu-contact {
margin-left: 42px;    }
}
    @media (min-width: 1680px) {
  #menu-solutions {
left: 14px;    }
}
@media (min-width: 1680px) {
  #menu-regulation {
right: 60px;}

}
@media (min-width: 1680px) {
  #menu-about {
right: 40px;}

}





    @media (min-width: 1920px) {
  #menu-about {
padding: 0px 60px 0px 0px;
    }
    }
       @media (min-width: 1920px) {
  #menuu {
padding: 0px 15px 0px 0px;
    }
       }
           @media (min-width: 1920px) {
  #menu-regulation {
right: 95px; 
}
           @media (min-width: 1920px) {
  #menu-contact {
left: 1px; 
}
    @media (min-width: 1920px) {
  #menu-solutions {
      left: 25px;
    }

在 Chrome 上一切看起来都很好。我还没有检查 Firefox，但我确实希望菜单上的所有内容都出现在所有浏览器上。似乎网站上的其他所有内容都正常。这是网站的链接：mayabarber.co.il

谢谢！

【问题讨论】：

标签： jquery html css wordpress microsoft-edge

【解决方案1】：

解决方案 1： 只需要从 CSS 中删除宽度。请检查随附的屏幕截图。删除宽度后，菜单对齐方式就会改变。

screenshot

解决方案 2： 在你的 main style.css 中放入 CSS 下方

.elementor-166 .elementor-element.elementor-element-a13b244{ width:auto; float:left;}

【讨论】：

谢谢，我尝试了您建议的第二种解决方案，它帮助我使用分辨率为 1920 的屏幕，但不是像 1280 这样的小屏幕。删除宽度会影响我的 chrome 显示器，我不想要那个。