不定义position的话页面会不正常,找到了这个问题后,发现mui-slider-progress-bar(下边的那个小条)又显示不正常了,我将代码放到了货单页中,放到第一页没有问题,第二页就出现了这个问题,我将错误的程序也上传了上来,可以直接下载程序测试,请帮忙查看下,非常非常感谢
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mui-control-content {
background-color: white;
min-height: 500px;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
position: initial;
}
</style>
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="aShouYe" class="mui-tab-item mui-active" href="#pageShouYe">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#pageHuoDan">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">货单</span>
</a>
<!--<a class="mui-tab-item" href="#pageXiaoXi">-->
<a id="aShangCheng" class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">商城</span>
</a>
</nav>
<!-- 主页面内容容器 -->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<div class="mui-content">
<div id="pageShouYe" class="mui-control-content mui-active">
</div>
<div id="pageHuoDan" class="mui-control-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#sliderFaHuo">
发货
</a>
<a class="mui-control-item" href="#sliderShouHuo">
收货
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
<div id="sliderFaHuo" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div hidden="hidden">hkjhkjhkjhkjhkj</div>
<div>起点:sdfsdf</div>
<div>终点:122123</div>
</li>
<li class="mui-table-view-cell">
<div hidden="hidden">hkjhkjhkjhkjhkj</div>
<div>起点:sdfsdf</div>
<div>终点:122123</div>
</li>
</ul>
</div>
</div>
</div>
<div id="sliderShouHuo" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div hidden="hidden">hkjhkjhkjhkjhkj</div>
<div>起点:sdfsdf</div>
<div>终点:122123</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pageShangCheng" class="mui-control-content">
</div>
</div>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>