我正在使用媒体查询来构建此网站的移动版本:http://www.foodjing.com/。
当我缩小我的台式电脑浏览器窗口时,滚动条会完美地显示(在光标下的那个):
但是,当该网站在Android手机上显示时,即使溢出div中有项目,滚动条也会消失。
有没有什么建议来修复这个问题?
代码:
搜索结果的默认CSS:
当我缩小我的台式电脑浏览器窗口时,滚动条会完美地显示(在光标下的那个):
但是,当该网站在Android手机上显示时,即使溢出div中有项目,滚动条也会消失。
有没有什么建议来修复这个问题?
代码:
搜索结果的默认CSS:
div#resultsListing {
float:left;
height:100%;
margin:0;
padding:0;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
ol {
width: auto;
height: 100%;
margin: 0;
padding: 0;
li.place {
display: none; // initially hidden, we will fade in
list-style: none;
&:hover, &.active-on-map { background-color: #F8F8F2; }
span.dish-name { color:#228; }
.highlight { background-color:#FEFECE; }
.dish-name {
font-size: 16px;
font-weight: bold;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
float: left;
margin: 5px 5px 0 0;
}
.place-name {
color: #CC5033;
font-size: 14px;
font-weight: bold;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
float: left;
margin: 8px 0 0;
}
&.place-only {
.place-name {
float:none;
}
.dish-price,.dish-name,.dish-descriptio,.dish-notes {
display:none;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
}
}
span.dish-price {
font-size: 12px;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
color: #666;
top: 25px;
right: 0;
position: absolute;
}
span.distance,
span.address,
span.phone,
span.hours,
span.dish-notes {
float: left;
padding: 0 10px 5px 0;
font-size: 12px;
}
span.dish-description {
color:#AAA;
font-size:small;
}
span.address {
color: #666;
}
span.distance {
font-style: italic;
}
span.phone {
color: #AAA;
font-weight: bold;
}
span.hours {
color: #999;
}
span.dish-notes {
color: #999;
font-size: 12px;
}
}
}
}
移动端CSS:
/* =Media
-------------------------------------------------------------- */
div#results { width:100%; }
div#resultsListing { width:auto; }
div#bigmap { width:100%; height:100%; }
@media screen and (max-width: 480px) {
#header {
padding: 0 0 0 12px;
h1 {
margin: 5px 10px 0 0;
width: 18px;
height: 27px;
a {
background: url(../images/logo-mobile.png) no-repeat scroll left top;
float: left;
width: 18px;
height: 28px;
text-indent: -9999px;
}
}
div#header_search {
border-right: 1px solid #E8E8E2;
margin: 0;
padding: 0 14px 0 0;
width: 132px;
input#searchbox {
width: 122px;
padding: 0 4px;
margin: 5px 0 5px;
font-size: 12px;
}
span#header_near_label {
display: none;
}
}
div#mobile-buttons {
a.map-view {
background: url(../images/map-view.png) no-repeat scroll left top;
border-right: 1px solid #E8E8E2;
float: left;
width: 31px;
height: 36px;
text-indent: -9999px;
}
a.list-view {
background: url(../images/list-view.png) no-repeat scroll left top;
float: left;
width: 31px;
height: 36px;
text-indent: -9999px;
}
}
}
div#results {
width: 100%;
}
div#resultsListing {
width: auto;
margin-left: 10px;
.dish-name {
font-size: 14px !important;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
}
.place-name {
font-size: 12px !important;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
margin: 2px 0 0;
}
.dish-price {
font-size: 12px !important;
font-family: Bitstream Charter, Georgia, Times Romans, serif;
}
}
}