0

サイトをレスポンシブに変換しようとしていますが、画像のサイズ変更と一部のjquery要素の配置に問題があります。

このテストサイトをご覧ください。ブラウザの幅を狭くすると（私は768に設定しました）、Firefoxではすべて問題なく表示されます。

IE8では、スライダー内の画像のサイズとスライダーのキャプションの配置を除いて、すべてが機能します。

画像は、小さいビューポートに合わせてサイズが縮小されていません。スライド上の要素の配置に関しては、レスポンシブコードの一部ではないため、ページでIE固有のスタイルを使用できないと想像しているので、解決策があることを望んでいます...または私はできますか？

途方に暮れています！

4

1 に答える 1

0

私の推測では、メディアクエリが使用するCSSセレクターです

#slider > section > deiv > div img { 
    width: 768px;
    height: 251px;
}

セクションタグを別のものに変更するか、CSSセレクターで画像を直接選​​択してみてください。セクションタグはHTML5要素であり、メディアクエリがセクションタグを選択できないため、IE8ではサポートされていません。

CSSセレクターを次のように変更できます。

#slider * img {
    width: 768px;
    height: 251px;
}

#slider * imgセレクターは、スライダーのIDを持つ要素の子/孫を取得します。

セクションタグの詳細とブラウザサポートについては、http ：//www.w3schools.com/html5/tag_section.aspをご覧ください。

編集：さらに調査したところ、IE8はメディアクエリをサポートしていないようです。javascriptを使用してメディアクエリをエミュレートするために使用できる代替手段があります。この前の質問をチェックしてください： CSSメディアクエリのIE8サポート

http://code.google.com/p/css3-mediaqueries-js/を使用してこの機能をIE8に実装することをお勧めします。

基本的に、このJSファイルをアプリケーションに含めて、ネイティブでサポートするブラウザー用に作成した場合と同じようにメディアクエリを作成するだけなので、実装は比較的簡単に見えます。

于 2012-09-11T16:44:40.537 に答える