3

私はページの HTML を書いており、ブートストラップ 3 も使用しています。ページは FF、Chrome、IE9 では問題ないように見えますが、IE8、IE7 では正しく動作しません。

問題: メイン コンテンツがページ全体に広がっているように見えます。つまり、他のブラウザでは正常に動作するのに流動的に動作します。

私が試したこと：他のフォーラムで与えられたように、私はrespond.js、以下のコードのようなメタタグ（ "X-UA-Compatible" content="IE=edge"）、HTML5shivを含めてみましたが、何も動作していないようです. ブートストラップ 3 は公式に IE7 をサポートしていないことを読みましたが、IE8 でもこの問題が発生します。コンテナ クラスが IE8/7 に適用されていないようです。

誰でもこれについて助けてもらえますか？以下はそのための HTML です。また、フィドルで - http://jsfiddle.net/CPaDb/2/

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
    <div class="logo-cont">
        <a href="home.html" class="logo-link></a>
    </div>

    <div class="main-cont">
        <div class="site-box-cont">
            <ul class="site-box-list clearfix">
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
            </ul>

        </div>
    </div>
</div>
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script>
</body>
</html>

CSS

.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }

.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
4

1 に答える 1

3

いくつかの問題が発生しています...その中で、あなたは HTML5 タイプではなく XHTML 1.0 doctype を使用しています。「home.html」リンクに終了引用符がありません。

JSFiddle は IE8 のテストと互換性がないため、JSFiddle のデモを投稿できません。しかし、私は IE8 を持っており、IE8、FF17、および Chrome 29 で次のコードをテストしました。さらに何か必要な場合や質問がある場合はお知らせください。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Bootstrap Sample</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }

.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
</style>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="container">

    <div class="logo-cont">
        <a href="home.html" class="logo-link"></a>
    </div>

    <div class="main-cont">
        <div class="site-box-cont">
            <ul class="site-box-list clearfix">
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
            </ul>

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

</body>
</html>
于 2013-09-09T21:03:24.440 に答える