1

これは恥ずかしいほど基本的な問題ですが、私は解決策を見つけようとして頭を悩ませてきました。

私がやろうとしているのは、IE7 で Web サイトを中央に配置することだけです。Firefox、Safari、IE8、および Chrome で問題なく動作します。IE7だけではありません：

#container
{
    margin:0 auto;
    width:1035px;
}

これがどのようにうまくいかないのかわかりません。私は厳密で移行的なDoctypeを試しました。また、本文を text-align:center に入れました(違いはありません)。

この件に関するアドバイスをいただければ幸いです。

わかりました、ここに（一部の）周囲のコードがあります：

HTML:

<!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=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

</head>
<body>

    <div id="container">

        <div id="content-container">
            <div id="content">

                /* content */               

            </div>

        </div>
    </div>
</body>
</html>

CSS (メイン):

html,body
{
    text-align: center;
    background-color:#F8F5EF;
    height:100%;
    margin:0;
    padding:0;
    width:100%;

}

#container
{
    margin: 0 auto;
    width:1100px;
}

#content-container
{
    float: left;
    width: 1100px;
    background-image:url('../images/BG1.gif');
    background-repeat:no-repeat;
    background-position:0px 0px;    
}

#content
{
    float: left;
    width: 778px;
    padding: 15px 0px 80px 15px;
    margin: 0 0 60 0px;

}

IE7.css ファイルは、これらの項目を変更しません。

ありがとう！

G

4

7 に答える 7

2

このコードはすべての IE で動作するため (テスト済み)、周囲の HTML/CSS を投稿しないと、実際には役に立ちません。

実際の例

それはあなたがスタイルに影響を与えている何かを持っていると私に信じさせます. それを示すか、リンクを提供できる場合は、より多くのヘルプを提供できると思います。

使用する CSS は次のとおりです。

#content {
    width:     100px;
    margin: 0 auto;
    border: 1px dashed red;
}

使用される HTML:

<div id="content">
        content here
    </div>

提供された css/html を使用して更新されたコード:

http://jsfiddle.net/hyVjs/2/

このコードは問題ありません。サブCSSファイルの1つがあなたを台無しにしています:)

条件付き css ファイルを削除してみて、まだ機能しないかどうかを確認しましたか?

于 2011-02-24T10:36:01.793 に答える
2

DOCTYPE が設定されていることを確認してください。そうでない場合、IEは奇妙な「ダーティモード」を有効にします

于 2011-09-19T21:24:38.477 に答える
1

コンテナに対してこれを試すことができます： 

#container {
   position: absolute;
   margin:0 0 0 50%;
   width:1100px;
   left: -550px; /*half the element width*/
}

上記がニーズに合わない場合は、試してくださいposition:relative;

他に何もしなかったときに、パーセンテージマージンを使用するとIE7で機能することがわかりました。自動マージンは時々機能するように見えますが、jsFiddle のコードは IE7 では問題ないように見えました。

左端から中央に配置された要素を元に戻すには、左への負の配置が必要です。

于 2011-08-25T08:09:37.033 に答える
0

ええ、コンテナを中央に配置する場合は、通常text-align:center;、下位互換性のためにコンテナ内で本文と左揃えを行います。いつか殺すつもりの古い習慣。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>a box</title>
        <style>
            body { text-align:center; }
            #wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
        </style>
    </head>
    <body>
        <div id="wrap">&hellip;</div>
    </body>
</html>
于 2011-02-24T10:37:11.567 に答える