Question

我有以下HTML代码来创建垂直导航栏：

<div id="nav">
  <ul>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
  </ul>
</div>
<div id="stream">
  <p>Hello</p>
</div>

和CSS：

body {
  font-family: Helvetica;
  color: #FFF;
  width: 960px;
  margin: auto;
  background-color: #CCC;
}

#nav {
  width: 239px;
  padding-top: 40px;
  float: left;
}
#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

#nav ul li a {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  padding: 10px 0 10px 20px;
  text-decoration: none;
  background: #1A6680;
  color: #FFF;
  display: block;
}

#stream {
  text-align: center;
  border: 1px solid #000;
  width: 719px;
  height: 550px;
  background: #007A5C;
  float: right;
}

虽然这通常可以正常工作，但如果缩小，#nav会在#stream之上，而不是并排。如何确保#nav和#stream div并排并触摸？

Answer 1

在浏览器中“缩小”时，浏览器会尝试补偿边框。您已将边框设置为1px，但在50％缩放时，边框实际上呈现的宽度为2像素。

这样做的原因是当浏览器缩小它所显示的元素的大小时，它会尝试对边框执行此操作。但是，由于您只指定了1像素宽的边框，因此它将首先计算小于1的宽度。因为您无法显示某个像素的一部分，浏览器会尝试进行补偿。

然而，它会过度补偿并将原始值与缩放比例相乘。因此，在50％时，边界计算在

1 * 0.5

返回1.5并扩大到2。

因此，这个问题会有几个解决方案。

您可以调整框和边框的宽度补偿浏览器将进行的任何修改。
您可以使用百分比宽度按照Fahad的建议使页面响应。

或者您可以使用CSS3的box-sizing属性（如果您不太关心旧版浏览器的回退）;

#stream {
    text-align: center;
    border: 1px solid #000;
   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 719px;
    height: 550px;
    background: #007A5C;
    float: right;
}

取自Sunny's Answer

我相信会有其他决议，但我相信这些是你最好的三个选择。

如何在缩小时阻止div在彼此之下移动

1 个答案: