5

ネストされた div が 3 つあります。

<div class="outer">
  <div class="inner"><div class="item"></div></div>
</div>

.inner div は絶対位置であり、それぞれに 1px の境界線があります。

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
}
.item{
  width:100px;
  height:100%;
  background-color:yellow;
  display: inline-block;
  border:1px solid green;
  box-sizing:border-box;
}

この配置により、.outer div にスクロールバーが表示されます。

コードペンはこちら

これはなぜですか? また、それを防ぐには何を変更する必要がありますか?

.inner div の境界線の幅が 3px に増加すると、スクロールバーが消えます。繰り返しますが、なぜこれが起こっているのですか？

4

4 に答える 4

4

これは、.item要素が として表示するように設定されているために発生していますinline-block。これは、line-heightや などの影響を受けることを意味しvertical-alignます。

inline-block要素のデフォルトの垂直方向の配置はベースラインです。これは、横に入力される可能性のあるテキストのベースラインに表示されるように設定されていることを意味します。box-sizing100% 確信があるわけではありませんが、この計算を行うときに が無視され、ベースラインが本来あるべき場所より 2 ピクセル下にあるという問題がある可能性があると思います (境界線が累積 2 ピクセルに適用されるため)。要素の上部と下部)。

その要素をこのように表示したままにしたい場合、簡単な修正は次のように設定するvertical-alignことtopです:

.item {
    ...
    vertical-align: top;
}

コードペンのデモ。

于 2015-10-07T14:40:36.277 に答える
2

overflow-x:hidden;最も奇妙なことは、スクロールバーを削除すると消えることです。その理由は、のデフォルトの動作は、overflowいじらvisibleないとスクロールバーが表示されないためですがoverflow-x、何らかの値に設定するoverflow-yとauto、デフォルト値の代わりに に設定さvisibleれ、結果としてスクロールバーが表示されます。

スクロールバーに設定overflowするとauto、スクロールバーも表示されます。

一方、は、下部にスペースを作成するように.item設定されています。に設定するとスペースがなくなり、増やすとスペースも増えます。inline-blockline-height.innerline-height:0

もう一方 (3 番目の手) に.inner設定.innerすることで、内部の要素が占めるスペースを狭めることができます。overflow:hidden

于 2015-10-07T14:49:09.267 に答える
0

inline-blockインナーアイテムに使う理由は？スクロールをブロックするように変更すると、スクロールが消えます。

.item{
  width:100px;
  height:100%;
  background-color:yellow;
  display: block;
  border:1px solid green;
  box-sizing:border-box;
}
于 2015-10-07T14:39:39.340 に答える