2012-11-19 60 views
0

我正在構建移動網站並出現一個奇怪的問題。頁面滾動橫向。不僅如此,標題似乎是固定的,內容似乎橫向滾動。問題將得到最好的理解,如果你看看這個page防止iOS中內容的橫向滾動

我試着設置身體的最大,最小寬度,#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; 
} 

回答