Question

我正在建立一个移动网站并遇到一个奇怪的问题。页面滚动侧身。不仅如此，标题似乎是固定的，内容似乎向侧面滚动。如果你看一下page

，问题就会得到最好的理解

我尝试设置body的最大，最小宽度，＃search-page，＃search-controls。似乎没什么用。

#search-page #header.ui-bar-a{
    background: #fff;
    border: none;
    border-bottom: 3px solid #5D2B44;
    padding:0 10px 4px 0;
    margin:0;
    height:63px;
    text-shadow: none;
}

#search-controls {
    height: 63px;
    padding: 5px;
}

/*#search-controls .br-right {
    border-right: 1px solid #ccc;
}
*/
.search-field {
    width: 100%;
    overflow: hidden;
    height: 26px;

}

.search-field .ui-btn-inner{
    font-size: 12px!important;
    font-weight:bold!important;
}

.filter, .ratings, .name {
    height: 24px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    text-shadow: none;
    min-width: 55px;
    padding: 0 2px;
}

.filter{float: left;}
.ratings, .name, .sort-by{float: right;}
.ratings{margin-right: 1px;}

.sort-by {
    font-size: 16px;
    margin: 6px 20px 0 0;
}

/* Stacked List */

.ui-content{overflow-x: visible;}

.ui-content .ui-listview {
    margin: -10px;
}
.ui-listview li{
    padding: 0;
}

.ui-li-static.ui-li {
    padding: 0 15px 0 0;
    margin: 0 0 -10px 7px;
}

.ui-li-static.ui-li-has-thumb {
    min-height: 85px;
    padding-left: 105px;
}

.ui-li-thumb{
    max-height: 85px;
    max-width: 100%;
}

.ui-li-heading{
    color: #5D2B44;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    padding-top: 10px;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-li-heading .ui-link, .ui-li-heading .ui-link:visited, .ui-li-heading .ui-link:active{
    color: #5D2B44;
    text-decoration: none;
}

.ui-li-desc.cusine {
    font-size: 12px;
    font-weight: normal;
    display: block;
    line-height: 12px;
    padding: 1px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ui-li-desc.cusine {
    color: #999;
    margin: -.9em 0 0;
}

.ui-li-desc.rating {
    color: #666;
    margin: -.9em 0 0;
}

.ui-li-desc.location {
    color: #424242;
    margin: -.2em 0 0;
}

.result {
    height: 85px;
    border-bottom: 1px solid #5D2B44;
    display: block;
    overflow: hidden;
}

.result img {
    width: 95px;
    height: 85px;
    margin: 0 10px 0 0;
    float: left;
}

.result .info {
    padding: 12px 10px 0 0;
    float: left;
    text-shadow: none;
    max-width: 385px;
    height: 75px;
}

.result span {
    display: block;
}

.result .restaurant {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    color: #5D2B44;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.result .cusine {
    font-size: 12px;
    line-height: 12px;
    color: #999;
    padding: 1px 0;
}

.result .stars {
    height: 12px;
    padding-top: 0px;
}
.result .location {
    font-size: 12px;
    line-height: 12px;
    color: #424242;
}

.rates .rating-number{
    line-height: 12px;
}

Answer 1

尝试从overflow-x:visible文件中删除search-inactive.css样式。来自http://www.css3.com/网站：

'overflow-x'属性描述了如何处理超出元素宽度的内容

可能相关的一些SO帖子：

防止在iOS中横向滚动内容

1 个答案: