Question

我为响应式网站设置了一个非画布导航菜单，并且大部分工作正常（图标与我的网站不匹配，但可以等待）。

我遇到的问题是，当我收缩浏览器窗口（Chrome），我的Android手机（三星S5）和视口测试器（Brad Frost＆＃39; s {{}时，左上角的汉堡菜单图标会显示3}}）但是在我老板的iPad上（第四代 - 型号A1458 - iOS 7）？什么都没有。

有没有理由在div中看到div而不是在safari中？代码如下。

HTML

<!-- Lable for #showmenu to hide the menu/uncheck the checkbox -->
<label class="toggle" for="toggle"><div class="fa fa-2x fa-bars"></div></label>

<!-- Menu content -->
<div class="menuContent">
    <div id="smallMenu" class="<%= Request("MainID") %>">
    <div id="Div1">
        <div class="smallMenu-main-categories-holder">
            <asp:Repeater ID="rptSmall" runat="server">
                <headerTemplate>
                    <div class="smallMenu-main-categories">
                        <ul>
                </headerTemplate>
                <ItemTemplate>
                        <li><asp:HyperLink ID="hlCategory" runat="server" CssClass="white"></asp:HyperLink></li>
                </ItemTemplate>
                <footerTemplate>
                        </ul>
                    </div>
                </footerTemplate>
            </asp:Repeater>
        </div>
    </div>
</div>
</div>

CSS

#menu                               { display: block; width: 180px; height: 100%; top: 0px; z-index: 9999; position:absolute;}
#menu  .toggle                      {top: 5px; left: 180px; padding:10px; position: absolute;}
#toggle                             {display: none;}
/* Pushing the Menu off the canvas */
#menu                               {left: -180px; -webkit-transition: left 1s;transition: left 1s;}
/* Showing the menu then the Checkbox is checked */
#toggle:checked + #menu             {left: 0; -webkit-transition: left 1s; transition: left 1s;}

有问题的Div就是这个：<label class="toggle" for="toggle"><div class="fa fa-2x fa-bars"></div></label>，它是FontAwesome的图标包的一部分，我使用跟随CSS来获得风格。

FontAwesome

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-2x {
  font-size: 2em;
}

.fa-bars:before {
  content: "\f0c9";
}

我假设如果它不会在ipads上显示，我也会遇到iphone和其他设备的问题。

在ipad上看不到CSS菜单图标？

0 个答案: