Question

enter image description here 每个移动浏览器都会出现问题，除了firefox。在Windows Chrome devtools模式和启用设备工具栏中会出现此问题。我发现stackoverflow中的另一个问题可能是同样的问题。 element invisible in mobile chrome and safari 有人遇到过这个bug吗？怎么解决？如果有人给我任何提示，我们将非常感激。

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

Answer 1

发生这种情况是因为你给边栏提供了overflow: hidden。在较小的屏幕中，它会产生问题。请尝试这样做并检查问题是否已解决

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

Android移动浏览器中的元素不可见

1 个答案: