0

IE7で奇妙なレイアウトの問題があります。基本的には、コンテンツが左上に配置されるのではなく、中央のどこかに配置されるということです。

すべてが正しく表示されているように見えますが、これmain-bank-containerは1つの要素が適切ではありません。これは、暗黙的ではなく、jQueryを使用して含まれているdivの高さを維持する必要があることを意味するため、絶対的な位置付けはしたくありません。

ここでjsFiddleを設定しました。

コードは次のとおりです。

HTML

<div style="padding: 4px;" class="nopad" id="maincontent">
    <div id="summary-page-container">
        <div id="main-bank-container">
            <div id="bank1" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank2" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank3" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank4" class="bank-container">
                <div class="basicview">
                </div>
            </div>
        </div>
        <div style="clear: both;">
        </div>
    </div>
</div>

CSS

#maincontent {
    overflow: hidden;
    text-align: center;
}
#summary-page-container {
    overflow: hidden;
    position: relative;
    width: 1400px;
}
#main-bank-container {
    width: 690px;
}
.bank-container, .bank-container-small {
    border: 1px solid #CFCFCF;
    border-radius: 5px 5px 5px 5px;
    color: #555555;
    height: 90px;
    margin: 10px;
    position: relative;
    text-align: left;
    text-shadow: 0 1px 1px #FFFFFF;
    width: 670px;
}
.basicview {
    background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ebebeb));
    background:-moz-linear-gradient(top,#ffffff,#ebebeb);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb')"; /* IE8 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb'); /* IE6 & IE7 */

    border-radius: 5px 5px 5px 5px;
    height: 90px;
    width: 100%;
}
​

ああ、ここで重要なのはmydoctypeです

<!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" dir="ltr" lang="en-US">
4

3 に答える 3

2

text-align: center;から削除#maincontent

私のフィドル

于 2012-07-23T09:23:17.373 に答える
0 
#main-bank-container {
    width: 690px;
    float:left;
}
于 2012-07-23T09:22:43.380 に答える
0

考えられる 2 つの問題は、#main-bank-container の幅が 690 ピクセルであるのに対し、概要ページのコンテナーの幅が 1400 ピクセルであることです。

また、IE7 標準を使用して IE9 のフィドルを見ると、#maincontent div の text align center 宣言を削除すると、配置が整理されます。

于 2012-07-23T09:32:25.880 に答える