0

私は一日中これで髪を引き裂いてきたので、どんな助け/アドバイスも歓迎します！

基本的に、私の新しいプロジェクトでは、モバイルブラウザの検出スクリプトを使用して、ユーザーがモバイルデバイスを使用しているかどうかを確認し、使用している場合は通常のスタイルシートを無効にしてモバイルスタイルシートを有効にします。

私はそれでほとんどのねじれを解決することができましたが、何らかの理由でセクションの1つにコンテンツスライダーの問題があります。各スライドに2つのインライン要素があります。1つは左にフローティング（テキスト）、もう1つは右にフローティングです。 （画像）。何らかの理由で2番目のスライドをクリックすると、画像がテキストの下に移動します。通常、これは余地がない場合に発生しますが、両方の要素に十分な余地があるため、そうではありません。

これはモバイルデバイスでのみ発生するため、 http：//beta.residencyradio.comにアクセスして機能セクションに移動すると、実際に意味を確認できます。現在使用しているバージョンはタブレット用であるため、表示するのが最適です。そこの。

私の考えでは、これはモバイルスタイルシート（下記）のこのコードスニペットの何かに関係しているに違いありませんが、何が原因かよくわかりません。

#feat {
width: 60em;
margin-top: 3.125em;
display: inline-block;
}

.feat_container {
width: 23.4375em;
display: inline-block;
margin-top: 9.0625em;
margin-bottom: 9.0625em;
float: left;
}

.feat_container p {
font-size: 1.125em;
line-height: 1.2em;
margin-bottom: 0;
}

.feat_logo {
width: 23.4375em;
display: inline-block;
float: right;
margin: 0;
}

#feat_nav {
float: left;
display: inline-block;
}

#feat_nav a { 
background: url('../images/dot.png') no-repeat;
font-size: 16px;
padding-right: 9px;
text-decoration: none; 
margin-right: 5px; 
color: rgba(1, 1, 1, 0);
}

#feat_nav a.activeSlide { 
background: url('../images/dot_active.png') no-repeat;
}

#PSM .feat_container {
margin-top: 8.375em;
margin-bottom: 8.375em;
}

#PSM, #banger, #hot, #eclectic, #definitive, #guest {
width: 60em;
}

#guest .feat_container {
margin-top: 7.6875em;
margin-bottom: 7.6875em;
}

どんな助けでも大歓迎です！

ありがとう、

マイケル

4

1 に答える 1

0

わかりました、私は実際に「電球の瞬間」の後でこれを理解することができました。何らかの理由で、モバイルデバイス（私はandroidとiosでテストしました）は、スライドが変更されたときに含まれている要素の幅をレンダリングするのに問題があるようです。

修正、単に変更

#PSM, #banger, #hot, #eclectic, #definitive, #guest { width: 60em; }

に

#PSM, #banger, #hot, #eclectic, #definitive, #guest { max-width: 60em; }

そしてそれはそれを整理します、それが誰かを助けることを願っています！

于 2012-04-20T02:36:35.913 に答える