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

标签 android html ios css web

我在移动设备上创建了一个带有粘性汉堡菜单的网站。我检查了它在 iPhone 和 Android 上的外观,发现它在 iPhone 上看起来有点奇怪。

左边是它在 Android(LG G7 和 G6)上的样子,这是正确的方式:

右边是它在 Safari (iPhone) 上的样子:

enter image description here enter image description here

我希望它看起来像 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>

最佳答案

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

关于android - 汉堡包菜单图标在 Safari 浏览器上看起来很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51397318/

相关文章:

ios - 这个观点叫什么?操作系统

iphone - 在 NSString 中将 NSData 显示为二进制

ios - UITableViewCell 内 UITableView 的自动布局设置

java - jackson 不忽略 json 数组中的空对象

android - MediatorLiveData onChanged 没有被调用

java - 出现错误: Execution failed for task app:transformClassesWithMultidexlistForDebug

php - IF ELSE、PHP 和 CSS

java - 如何在AsyncTask类中添加更多方法?

javascript - "input"类型范围内的问题,以及JavaScript设计视频播放器

html - 投影以扩展元素的整个宽度