要素はアンドロイドモバイルブラウザでは表示されません

enter image description here 問題はFirefox以外のすべてのモバイルブラウザで発生します。 WindowsのChromeのdevtoolsモードでデバイスツールバーを有効にすると、この問題が発生します。私はおそらく同じisssueのstackoverflowで別の質問を見つけました。 element invisible in mobile chrome and safari 誰かがこのバグに遭遇しましたか？それを修正するには？誰かが私に何かヒントを与えてくれたら大変感謝しています。要素はアンドロイドモバイルブラウザでは表示されません

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="renderer" content="webkit"> 
<title>Demo</title> 
<meta name="keywords" content="Demo"> 
<meta name="description" content="Demo"> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<style type="text/css"> 
.sidebar .subclass > li > a { 
    display: block; 
} 
/* topbar */ 
.sideview .topbar { 
    height: 48px; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    background-color: #00a6ae; 
    padding: 0px; 
    margin: 0px; 
    text-align: right; 
    z-index: 1000; 
} 
/* sidebar */ 
.sideview .sidebar { 
    position: fixed; 
    top: 48px; 
    bottom: 0px; 
    left: 0px; 
    background-color: #666666; 
    overflow: hidden; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1000; 
} 
.sideview .sidebar > li { 
    line-height: 42px; 
} 
.sideview .sidebar > li.on { 
    background-color: #777; 
} 
.sideview .sidebar a:link, 
.sidebar a:hover, 
.sidebar a:visited, 
.sidebar a:active { 
    color: #FFF; 
    text-decoration: none; 
} 
.sideview .sidebar > li:hover { 
    background-color: #777; 
    cursor: pointer; 
} 
.sideview .sidebar .nav-icon { 
    width: 50px; 
    display: inline-block; 
    text-align: center; 
    color: #FFF; 
} 
.sideview .sidebar .nav-title { 
    width: 130px; 
    display: inline-block; 
    text-align: left; 
    color: #FFF; 
} 
.sideview .sidebar > li > ul.on { 
    transition: width 1s; 
    width: 180px; 
} 
/* subclass */ 
.sideview .sidebar .subclass { 
    transition: width 1s; 
    width: 0px; 
    position: fixed; 
    top: 48px; 
    bottom: 0px; 
    background-color: #DDD; 
    z-index: 1000; 
    padding: 0px; 
    overflow: hidden; 
} 
.sideview .sidebar .subclass:hover { 
    z-index: 1010; 
    cursor: default; 
} 
.sideview .sidebar .subclass .subclass-title { 
    text-align: left; 
    padding-left: 16px; 
    padding-right: 0px; 
    cursor: default; 
    background-color: #777; 
    color: #FFF; 
    height: 42px; 
    overflow: hidden; 
} 
.sideview .sidebar .subclass .subclass-title i { 
    line-height: 42px; 
    width: 42px; 
    text-align: center; 
    cursor: pointer; 
    float: right; 
} 
.sideview .sidebar .subclass > li { 
    margin: 0px; 
    text-align: right; 
    color: #666; 
    cursor: pointer; 
} 
.sideview .sidebar .subclass > li.on { 
    background-color: #eeeeee; 
} 
.sideview .sidebar .subclass a:link, 
.sideview .sidebar .subclass a:hover, 
.sideview .sidebar .subclass a:visited, 
.sideview .sidebar .subclass a:active { 
    color: #666; 
    padding-right: 15px; 
} 
.sideview .sidebar .subclass > li:hover { 
    background-color: #eeeeee; 
    margin: 0px; 
} 
.sideview .header { 
    width: 50px; 
    height: 48px; 
    background-color: #fb8632; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
} 
.sideview .header h1 { 
    margin: 0px; 
    text-align: center; 
} 
.sideview .header h1:after { 
    content: " "; 
    display: block; 
    width: 40px; 
    height: 30px; 
    margin-top: 9px; 
    margin-left: 5px; 
    background-image: url(../images/logoa.png); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.sideview .topbar { 
    left: 50px; 
} 
.sideview .sidebar { 
    width: 50px; 
} 
.sideview .sidebar > li:hover .nav-title { 
    display: block; 
} 
.sideview .sidebar .nav-icon { 
    width: 50px; 
    display: inline-block; 
    text-align: center; 
    color: #FFF; 
} 
.sideview .sidebar .nav-title { 
    width: 130px; 
    background-color: #777; 
    text-align: left; 
    position: fixed; 
    left: 60px; 
    margin-top: -42px; 
    padding-left: 10px; 
    display: none; 
    z-index: 1000; 
    color: #FFF; 
} 
.sideview .sidebar .nav-title:before { 
    width: 0px; 
    height: 0px; 
    border: 8px transparent solid; 
    border-right-color: #777; 
    position: absolute; 
    top: 14px; 
    left: -16px; 
    content: ""; 
} 
.sideview .sidebar .subclass { 
    left: 50px; 
} 
.sideview #layout { 
    transition: padding-left 1s; 
    margin-top: 48px; 
    margin-right: 0; 
    margin-bottom: 0; 
    margin-left: 50px; 
    padding-left: 0px; 
    position: relative; 
} 
.sideview #layout.shrink { 
    transition: padding-left 1s; 
    margin-left: 50px !important; 
    padding-left: 180px; 
} 
/*------------------------------------ nav end ----------------------------------*/ 
</style> 
</head> 
<body class="sideview"> 
<div id="pagewrap"> 
    <div class="header"> 
    </div> 
    <div class="nav"> 
    <ul class="topbar"> 
    </ul> 
    <ul class="sidebar"> 
     <li class="on"><span class="nav-icon">H</span><span class="nav-title">Home</span></li> 
     <li><span class="nav-icon">U</span><span class="nav-title">Usage</span> 
     <ul class="subclass"> 
      <div class="subclass-title"><i> < </i> Usage</div> 
      <li><a href="sample/aui_text.html" ></span>Text</a></li> 
      <li><a href="#" ></span>Form</a></li> 
      <li><a href="#" ></span>Form extension</a></li> 
      <li><a href="#" ></span>Table</a></li> 
      <li><a href="#" ></span>Panel</a></li> 
      <li><a href="#" ></span>Tab</a></li> 
      <li><a href="#" ></span>Modual</a></li> 
     </ul> 
     </li> 
     <li><span class="nav-icon">S</span><span class="nav-title">Sample</span> 
     <ul class="subclass"> 
      <div class="subclass-title"><i> < </i> Sample</div> 
      <li><a href="sample/aui_dashboard.html" ></span>Infomation</a></li> 
      <li><a href="#" ></span>Message</a></li> 
      <li><a href="#" ></span>User</a></li> 
      <li><a href="#" ></span>Feedback</a></li> 
      <li><a href="#" ></span>Article</a></li> 
      <li><a href="#" ></span>list</a></li> 
      <li><a href="#" ></span>Boxes</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

    <div id="layout" class="layout-c" style="background-color:#FFF;"> 
    <div class="main"> 
     <div id="mainview" class="mainview" style="padding: 15px;"> 
<!-- start -->   

<div class="panel panel-default"> 
    <div class="panel-body" id="text-01"> 
<h1>h1. Header heading <small>Secondary text</small></h1> 
<h2>h2. Header heading <small>Secondary text</small></h2> 
<h3>h3. Header heading <small>Secondary text</small></h3> 
<h4>h4. Header heading <small>Secondary text</small></h4> 
<h5>h5. Header heading <small>Secondary text</small></h5> 
<h6>h6. Header heading <small>Secondary text</small></h6> 
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> 
    </div> 
</div> 

<!-- end -->   
     </div> 
    </div> 
    </div> 
</div> 
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 
<script> 
// shrink subclass(sub-menu) 
$(".subclass-title").click(function(){ 
    $(".subclass").removeClass("on"); 
    $("#layout").removeClass("shrink"); 
}); 
// spread out subclass(sub-menu) 
$(".nav-icon, .nav-title").click(function(){ 
    $(".sidebar>li").removeClass("on");  //清除点击状态 
    $(this).parent().addClass("on");  //点击状态保留 
    $(".sidebar>li>.subclass").removeClass("on");  //全部子菜单隐藏 
    $("#layout").removeClass("shrink");  //主要内容区域恢复展开 
    if($(this).nextAll(".subclass").length && $(this).nextAll(".subclass").length>0){  //判断是否有子菜单 
     $(this).nextAll(".subclass").addClass("on");  //显示子菜单 
     $("#layout").addClass("shrink");  //主要内容区域收缩 
    }; 
}); 
// sidebar二级菜单点击保留状态 
$(".sidebar .subclass>li").click(function(){ 
    $(".subclass>li").not(".subclass-title").removeClass("on"); 
    $(this).not(".subclass-title").addClass("on"); 
    $(this).parent().addClass("on");  //由topview切换到sideview时保证二级菜单显示 
    $(".sidebar>li").removeClass("on");   //父元素同级元素清除状态 
    $(this).parent().parent().addClass("on"); //父元素状态保留 

}); 
// zoom layout element 
$(".zoom").click(function(){ 
    if($("#layout").hasClass("zoom-enlarge")){ 
     $("#layout").removeClass("zoom-enlarge"); 
    } 
    else { 
     $("#layout").addClass("zoom-enlarge"); 
    }; 
} 
); 
</script> 
</body> 
</html>

出典

2016-11-23 Cliff Li

plsはあなたのコードを追加し解決しているかどうかを確認されsidebar.In小さな画面にoverflow: hiddenを与えているので、これは、起こりそれはサファリをサポートしていないいくつかのプロパティが含まれている可能性がありますまたはプロパティをチェックすることができますhttp://caniuse.com/ –

あなたはそれがこのようproblem.Tryを作成し、問題が

.sideview .sidebar { 
    position: fixed; 
    top: 48px; 
    bottom: 0px; 
    left: 0px; 
    background-color: #666666; 
    /* overflow: hidden; */ 
    padding: 0px; 
    margin: 0px; 
    z-index: 1000; 
}

出典

2016-11-23 09:56:10 XYZ

を使用してどのブラウザでサポートされています。 –

要素はアンドロイドモバイルブラウザでは表示されません

答えて

関連する問題