Question

我创建了一个网站，手机上有一个汉堡包菜单。我检查了iPhone和Android的外观，发现在iPhone上看起来有点奇怪。

左是在Android上（LG G7和G6）的外观，这是正确的方法：

右边是在Safari（iPhone）上的外观：

我希望它看起来像Android版本（没有宽阔，怪异的背景）。

任何人都可以告诉我如何使它在iPhone设备上的Safari浏览器中显示为圆形吗？

<div data-id="1455d08b" class="elementor-element elementor-element-1455d08b elementor-column elementor-col-50 elementor-top-column" data-element_type="column">
  <div class="elementor-column-wrap elementor-element-populated">
    <div class="elementor-widget-wrap">
      <div data-id="2831392c" class="elementor-element elementor-element-2831392c elementor-nav-menu__align-center elementor-nav-menu--stretch elementor-nav-menu--indicator-classic elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu"
        data-settings="{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;horizontal&quot;,&quot;toggle&quot;:&quot;burger&quot;}" data-element_type="nav-menu.default">
        <div class="elementor-widget-container">
          <nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-slide">
            <ul id="menu-1-2831392c" class="elementor-nav-menu" data-smartmenus-id="15319029903013254">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-373"><a href="http://wolfppr.donut.co.il/" class="elementor-item  elementor-item-active">דף הבית</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-372"><a href="http://wolfppr.donut.co.il/about-us/" class="elementor-item">אודות</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="http://wolfppr.donut.co.il/our-services/" class="elementor-item">השירותים שלנו</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://wolfppr.donut.co.il/hktdc/" class="elementor-item">HKTDC</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369"><a href="http://wolfppr.donut.co.il/talk-ahead/" class="elementor-item">Talk Ahead</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"><a href="http://wolfppr.donut.co.il/contact-us/" class="elementor-item">צרו קשר</a></li>
            </ul>
          </nav>
          <div class="elementor-menu-toggle" style="">
            <i class="eicon" aria-hidden="true"></i>
          </div>
          <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" style="top: 39px; width: 375px; right: -269px;">
            <ul id="menu-2-2831392c" class="elementor-nav-menu" data-smartmenus-id="15319029903020608">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-373"><a href="http://wolfppr.donut.co.il/" class="elementor-item  elementor-item-active">דף הבית</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-372"><a href="http://wolfppr.donut.co.il/about-us/" class="elementor-item">אודות</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="http://wolfppr.donut.co.il/our-services/" class="elementor-item">השירותים שלנו</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://wolfppr.donut.co.il/hktdc/" class="elementor-item">HKTDC</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369"><a href="http://wolfppr.donut.co.il/talk-ahead/" class="elementor-item">Talk Ahead</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"><a href="http://wolfppr.donut.co.il/contact-us/" class="elementor-item">צרו קשר</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

.elementor-menu-toggle {
    width: 39px
}

汉堡菜单图标在Safari浏览器上看起来很奇怪

1 个答案: