3

bootstrap3 を使用してレスポンシブ テンプレートを開発しようとしています。IE8 を除くすべての主要なブラウザーで完璧な結果を表示します。3列連続で作成しました。しかし、IE8 のデスクトップでは、1 行に 1 列しか表示されません。つまり、IE8 はデスクトップにタブまたはモバイル バージョンを表示します。head セクションで html5sive.js と Respond.js を使用しました。ブートストラップ ジャンバートンの例も実行しました。でも同じ結果。これは正しく表示されていないコードです-

おすすめ商品

        <div class="col-sm-4 col-xs-12 col-lg-4 col-md-4 ">
            <div class="product">
                <div class="product-img ">
                    <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
                <div class="row product-description">
                    <div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
                        <img class="product-logo" src="img/show1-icon.png" alt="" />
                    </div>
                    <div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
                        <h4>Stylish Brown Leather Shoes</h4>
                        <p><strong>$599</strong></p>
                    </div>

                    <div class="col-md-2 col-sm-2 col-xs-12 col-padding">
                        <a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12 col-lg-4 col-md-4  ">
            <div class="product">
                <div class="product-img">
                    <img class="img-responsive" src="img/show2.png" alt="" />
                </div>
                <div class="row product-description">
                    <div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
                        <img class="product-logo" src="img/show2-icon.png" alt="" />
                    </div>
                    <div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
                        <h4>Elegant Green Wonderful Shoes</h4>
                        <p><strong>$599</strong></p>
                    </div>

                    <div class="col-md-2 col-sm-2 col-xs-12 col-padding">
                        <a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12 col-md-4  col-lg-4 ">
            <div class="product">
                <div class="product-img">
                    <img class="img-responsive" src="img/show3.png" alt="" />
                </div>
                <div class="row product-description">
                    <div class="col-md-1 col-sm-1 col-xs-1 col-padding ">
                        <img class="product-logo" src="img/show3-icon.png" alt="" />
                    </div>
                    <div class="col-md-9 col-sm-9 col-xs-12 col-padding col-left-padding">
                        <h4>Women Cream and Beautiful Shoes</h4>
                        <p><strong>$599</strong></p>
                    </div>

                    <div class="col-md-2 col-sm-2 col-xs-12 col-padding ">
                        <a href=""><img class="basket" src="img/show-busket.png" alt="" /></a>
                    </div>
                </div>
            </div>  

        </div>
    </div>  
</div>
4

1 に答える 1

2

私はieのファンではありませんが、ua互換を使用する必要があるようです

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=EmulateIE8,IE=7,IE=EmulateIE7" />
于 2015-10-27T01:38:12.027 に答える