Element in Android mobilen Browser unsichtbar

enter image description here Problem in jedem mobilen Browser außer Firefox auftreten. In Windows Chrome Devtools Modus und aktivieren Sie die Gerätesymbolleiste dieses Problem passieren. Ich habe eine andere Frage in Stackoverflow wahrscheinlich die gleiche Frage gestellt. element invisible in mobile chrome and safari Hat jemand den Fehler gefunden? Wie man es repariert? Es ist großartig zu schätzen, wenn mir jemand Hinweise gibt.Element in Android mobilen Browser unsichtbar

<!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>

Quelle

2016-11-23 Cliff Li

pls Ihren Code hinzufügen, Es kann einige Eigenschaften enthalten, die auf Safari nicht unterstützen, oder Sie können überprüfen, ob eine Eigenschaft in welchem Browser unterstützt wird. http://caniuse.com/ –

Dies geschieht, weil Sie ein overflow: hidden zum sidebar.In kleineren Bildschirm gegeben haben, ist es die problem.Try es so zu schaffen und prüfen Sie, ob das Problem behoben ist

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

Quelle

2016-11-23 09:56:10 XYZ

Es funktioniert, vielen Dank. –

Element in Android mobilen Browser unsichtbar

Antwort

Verwandte Themen