0

モバイル サイトを構築していて、奇妙な問題が発生しています。ページを横にスクロールします。それだけでなく、ヘッダーが固定されているようで、コンテンツが横にスクロールするようです。このページを見ると、問題が最もよく理解できます

本文、#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;
}
4

1 に答える 1

0

ファイルoverflow-x:visibleからスタイリングを削除してみてください。http://www.css3.com/search-inactive.css Web サイトから:

「overflow-x」プロパティは、要素の幅を超えるコンテンツをどうするかを記述します

関連する可能性のあるいくつかのSO投稿：

于 2012-11-19T08:49:58.007 に答える