1

次の HTML/CSS があります。

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test script</title>
    <style>
      body, div, html {
        margin: 0;
        padding: 0;
      }

      .outer {
        text-align: center;
      }

      .inner {
        display: inline-block;
        margin-top: 20px;
        padding-left: 50px;
      }

      .inner div {
        background: red;
        border: #00F solid 5px;
        box-sizing: border-box;
        display: inline-block;
        height: 200px;
        line-height: 200px;
        margin-right: 50px;
        text-align: center;
        width: 200px;
      }

      .inner div:hover {
        border: #0F0 solid 50px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  </body>
</html>

本当に奇妙なのは、div の上にマウスを置くと、境界線のサイズが変わると、div 内のテキストが押し下げられ、他の div も押し下げられることです。

ただし、div からテキスト (つまり、「1」、「2」、「3」、および「4」) を削除すると、問題は発生しません。

div 内のテキストによってレイアウトが崩れるのはなぜですか?

ありがとうございました。

4

2 に答える 2

2

切り替えるdisplay:inline-block; とdisplay:block; float:left; 、サファリで動作します。

body, div, html {
    margin: 0;
    padding: 0;
}
.outer {
    text-align: center;
}
.inner {
    display:block;
    margin-top: 20px;
    padding-left: 50px;
    float:left;
}
.inner div {
    background: red;
    border: #00F solid 5px;
    box-sizing: border-box;
    display: block;
    height: 200px;
    margin-right: 50px;
    text-align: center;
    width: 200px;
    float:left;
    line-height: 200px;

}
.inner div:hover {
    border: #0F0 solid 50px;
    box-sizing: border-box;
}

http://jsfiddle.net/blaird/hFvPT/

正直なところ、理由がわかりません。

于 2013-12-17T00:33:23.153 に答える
0

問題はあなたの行の高さです。ボックスの高さと同じ 200px に設定されているため、境界線を 50px に増やすと、100px のスペースしかありません。簡単な修正方法の 1 つは、行の高さの数値をホバーに追加することです。

  .inner div:hover {
    border: #0F0 solid 50px;
    line-height: 100px;
  }

編集

Barbara Laird が指摘したように、これは実際には問題を解決していないようです。overflow:hidden をボックスに追加して機能させることもできますが、見栄えがよくありません。テキストを垂直方向に中央揃えにする別の解決策は、ラッパーを追加して display:table を使用することです。

  .inner div {
    background: red;
    border: #00F solid 5px;
    box-sizing: border-box;
    display: block;
    height: 200px;
    margin-right: 50px;
    text-align: center;
    width: 200px;
    float: left;
    display: table;
  }

  .inner div span {
    display: table-cell;
    vertical-align: middle;
  }

これが実際の例です：http://jsfiddle.net/7JH55/

于 2013-12-17T00:19:25.903 に答える