css - 无法使用网站的移动视图滚动
问题描述
我无法在我的网站上向下滚动。通过删除要测试的各种文件,我知道它存在于我的 css 文件中的某个位置。我尝试了溢出命令的不同变体(首先基于stackflow上的类似问题)但无济于事。我删除了标题中的各种javascript链接作为测试,但滚动问题仍然存在。
如果我没有给你所需的信息,我会用更多信息编辑我的问题。太感谢了。
body {
background-color:#FFFFFF;
-webkit-min-device-pixel-ratio: 2;
overflow:hidden;
}
h1 {
font-family: 'Ropa Sans', sans-serif;
font-size: 1.0em;
color: #FFFFFF;
font-weight: normal;
vertical-align: baseline;
display: inline-block;
background-color:#00293C;
}
h2 {
color: #a0a0a0;
font-family: 'Ropa Sans', sans-serif;
font-size: 1.4em;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
font-variant: normal;
letter-spacing: 1px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 2px;
margin-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
}
h3 {
color: #FFFFFF;
font-family: 'Ropa Sans', sans-serif;
font-size: 1.0em;
line-height: 1.0em;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
font-variant: normal;
letter-spacing: 1px;
margin-bottom: 15px;
}
p {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited{
color: #666666;
}
a:hover{
color: #666666;
}
a:active{
color: #666666;
}
ul {
list-style: none;
background-color: #f8f8f8;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
font-family: 'Ropa Sans', sans-serif;
font-size: 1.6em;
line-height: 1.2em !important;
letter-spacing: 1px;
color: #a0a0a0;
border: 1px solid #eaeaea;
padding: 2px;
margin-top: 18px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-color: #f8f8f8;
}
ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
background-color: #f8f8f8;
}
ul li a:active,ul li a:hover {
background-color: #01538B;
color: white;
}
li{
min-height:60px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eaeaea;
}
li:last-child { border-bottom: none; }
li a{
display:block;
min-height:60px;
-webkit-tap-highlight-color:rgba(0,0,0,0.05);
background-size:19px 14px;
background-image: url(../img/list-arrow.png);
background-repeat: no-repeat;
background-position: right center;
margin-top: 1px;
margin-right: 0;
margin-bottom: 1px;
margin-left: 0;
padding-top: 20px;
padding-right: 29px;
padding-bottom: 15px;
padding-left: 15px;
vertical-align: middle;
}
#header {
margin-right: auto;
margin-left: auto;
background-color:#00293C;
padding: 10px;
min-height: 80px;
font-family: 'Ropa Sans', sans-serif;
font-size: 2.8em;
color: #005F9B;
overflow: hidden;
}
#return_header {
/*position:fixed;*/
/*margin-top: -100px;*/
margin-right: auto;
margin-left: auto;
background-color:#333333;
padding: 10px;
min-height: 10px;
font-family: 'Ropa Sans', sans-serif;
font-size: 1.2em;
color: #005F9B;
overflow:hidden;
}
#content {
/*margin-top: 100px;*/
}
#header img {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 1px #e6e6e6;
overflow:hidden;
margin-top: 6px;
}
#bottom {
margin-right: auto;
margin-left: auto;
background-color:#00293C;
min-height: 8px;
font-family: 'Ropa Sans', sans-serif;
color: #FFF;
margin-top: 20px;
text-align: center;
padding:4px;
overflow:hidden;
}
#footer {
margin-right: auto;
margin-left: auto;
background-color:#FFFFFF;
min-height: 100px;
overflow:hidden;
}
.button {
display: inline-block;
width: 240px;
background: #005F9B;
-webkit-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
-moz-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 1px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-shadow: 0px 1px 1px #497a03;
padding: 6px 20px;
border-color: #00487B;
border-width: 1px;
border-style: solid;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px !important;
color: #ffffff;
font-weight: bold;
cursor:pointer;
}
这是我的 HTML 代码。
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Source+Sans+Pro::latin', 'Ropa+Sans::latin', 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<script>
$(document).ready(function() {
$( "body" ).hide().fadeIn(800);
$( "#header" ).hide().fadeIn(1200);
});
</script>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" /> </head>
<body>
你可以在这里查看网站(为登录要求道歉,我做了一个临时登录):如果你去 edoclist.com/mobile
用户名和密码都是 test123@test123.com
一个
解决方案
你body
有一个溢出hidden
。除非正文中有任何可滚动的容器 ( overflow: scroll
) 或类似容器,否则您的页面将不会滚动。
推荐阅读
- sql-server - Power BI 和 SQL Server 索引
- post - 如何仅使用 api 密钥发布到 pub/sub
- android - 带有复选框 clicklistener 的可扩展列表视图
- python - 无需循环即可获取多维数组点积的分量
- r - Shiny Apps 以代码 137 退出,日志中没有问题
- encoding - 未知的非二进制数据编码 - 任何提示?
- php - Laravel Curl 库 {message:authorization required}
- android - Proguard :- 混淆文件夹名称
- xamarin - 如何将 CollectionView.EmptyView 绑定到页面的 ViewModel?
- python - 如何验证字符串是否对应于有效的日期时间频率?(例如“一维”)