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; 它可以在 safari 中工作。

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

问题是你的行高。它设置为 200 像素，与框的高度相同，因此当您将边框增加到 50 像素时，您只有 100 像素的空间。一个简单的解决方法是将较低的行高数字添加到悬停中：

  .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 回答