0

私は2列のレイアウトを持っています.唯一のものはフッターエリアです. その周りに境界線を追加した後。右側は想定範囲を超えています。 http://jsfiddle.net/zhshqzyc/tRqpd/4/

Firefoxでテストします。いくつかのCSS：

footer
{
   border-style: solid;
   border-width: 6px;
   margin: 0px;
   clear: both;
   background-color: rgb(178, 178, 178);
   background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
   font-size: .8em;
   text-align: center;
   height: 50px;
   bottom: 0;
   width: 100%;
   padding-top: 20px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   color: #336699;
 }
4

1 に答える 1

0

デフォルトのボックスのサイズ設定では、宣言された幅に加えて境界線の幅が計算されます。したがって、フッターの宣言された幅は、含まれている要素の 100% ですが、6px の境界線が両側に追加されます。

を追加box-sizing: border-boxして境界線を 100% 幅の計算の一部にするか、境界線のサイズをパーセンテージで宣言してwidth(例: width: 98%; border-width: 1%;) から減算します。

于 2013-06-26T14:52:48.343 に答える