1

私は現在、IE8 と互換性のあるレスポンシブ Web ページを作成しようとしています。インターネットの助けを借りて、モバイルCSSコンテンツをCSSファイル内にメディアクエリと応答jsを配置することで、問題を解決することに近づきました。このアプローチから 2 つの問題が生じました。モバイル サイトで、メディア クエリの下のモバイル CSS が正しく読み込まれません。モバイルコンテンツへの特定の変更が表示されますが、他の変更は表示されません。IE8 サイトでは、トップのビデオが表示されないことと、別のビデオの幅と画像のサイズが台無しになっていることを除いて、ほとんど問題ないように見えます。助言がありますか？ありがとう！関連するコードの一部を紹介します

<head style="overflow-x: hidden">
    <script src="//cdn.optimizely.com/js/272026200.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>Dupont Studios</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="screen" href="style.css" />

    <script type="text/javascript" src="respond.js"></script>


@media screen and (max-width: 400px){
    body{
        font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif;
        margin:0;
        max-width:400px;


    }

乱れた ie8 画像のあるセクション

 <div class = 'picture-container' id = 'pc1'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for
                        one, two and three person filmed interviews and conversations.
                        We have studio lights, a three camera set-up and remote
                        monitoring. Additionally, our Infinity Wall creates a clean and
                        professional look that allows the film to be about the message.</div>
                    <div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>
                </div>
            </div>
        </div>

更新: 各スタイルシート リンクの後に追加しました。モバイル コンテンツは動作するようになりましたが、IE8 はまだ十分ではありません。divの高さと幅は、前述のセクションのいたるところにあり、画像のサイズはまだ途方もないです

4

1 に答える 1