1

私は周りを検索しましたが、これはすでに尋ねられたものを見つけることができませんでしたが、以前に出てきたに違いないと確信しており、見つけることができません. これが事前に重複した質問である場合は申し訳ありません。

私が取り組んでいる単純なサイトのレイアウトがあります。今日、クロムで、2 つの div 領域が幅いっぱいに拡張されていないことに気付きました。firefox と IE では完全に展開されます。問題のある 2 つの div リージョンにはテーブルが含まれています。これが原因でしょうか？

Heres の写真、右側の Chrome、上部の div と下部のフッター div のギャップ:

クロムギャップ

これは、2 つのリージョンの CSS です。

.topbar{
    margin: 0;  <---Added this in a hope to fix it.
    width:76%;
    height: 34px;
    background-image:url('img/topImgBg.png');
    background-repeat:repeat-x;
    padding-left: 12%;
    padding-right: 12%; 
    color:white;
    font-size:12px;
    text-align:right;
}

.footer{
    height:15%;
    width:76%;
    padding-left:12%;
    padding-right:12%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1A1A1', endColorstr='#ffffff'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#ffffff)); 
    background: -moz-linear-gradient(top,  #A1A1A1,  #ffffff);
}

本体の CSS は次のとおりです。

html, body {    
    margin: 0; 
    padding: 0;
    width: 100%; 
    min-width:1024px;
    font-family:Verdana;
    font-size:14px;
}

ティア

4

2 に答える 2

1

にwidth設定しました76%。そしてpadding、パーセンテージでも左右に。これは、ブラウザの丸めのパーセンテージの違いだと思います。

ブラウザの幅を少しずつ変更すると、ギャップが変化することがあります。

を何も指定せずwidth、そのままにしておいた場合はどうなるでしょうかpadding。それはうまくいくはずです。

于 2012-07-15T01:39:51.377 に答える