Question

当我增加时，我在firefox和chrome中都看到了一些奇怪的东西这些浏览器中的缩放级别，虽然我没有看到任何问题我的CSS。以下是整个故事：

我有一个右浮动的顶级div包含三个右浮动右。三个内部div具有像素的所有盒模型测量值直到封闭容器的宽度。一切都很好看浏览器大小是100％，但是当我开始缩小浏览器时使用CTRL +滚轮或CTRL +减去最右边的边距缩小太快，最终变为零，迫使我最右边漂浮的内部div下降到其他两个以下！

我无法理解这一点，几乎看起来像是一些整数除法在浏览器代码中执行不正确，但唉火狐和 chrome都显示相同的结果。

以下是示例（只需使用CTRL-minus缩小以查看我的意思）：

Click Here to View What I Mean on Example Site

为了缩小范围，感兴趣的标签如下：

div#mainContent
div#contentLeft
div#contentCenter
div#contentRight

我搜索了stackoverflow以获得答案，并找到了以下内容与我的问题有关但无法申请的帖子他们遇到了我遇到的问题：

的http：//   stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize

的http：//   stackoverflow.com/questions/18246882/divs-move-when-resizing-page

的http：//   stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes

的http：//   stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized

为方便起见，我复制了下面的html和css代码：

这是HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="wrapper">
    <header>
      <div class="logo">
        <a href="http://pinco.com">
          <img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
        </a>
      </div>
      <div class="titolo">
        <h1>Benvenuti!</h1>
        <h2>Siete arrivati al sito pinco.</h2>
      </div>
      <nav>
        <ul class="menu"> 
          <li><a href="#">Menù Qui</a></li>
          <li><a href="#">Menù Quo</a></li>
          <li><a href="#">Menù Qua</a></li>
        </ul>
      </nav>
    </header>
    <div id="mainContent">
      <div id="contentLeft">
        <section>
          <article>
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.

Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
            </p>
          </article>
        </section>
      </div>
      <div id="contentCenter">
        <section>
          <article>
            <p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
            </p>
            <img src="images/auto1.jpg" width="272" height="272" />
            <p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
            </p>
          </article>
        </section>
      </div>
      <div id="contentRight">
        <section>
          <article>
            <img src="images/auto2.jpg" width="272" height="272" />
            <img src="images/auto3.jpg" width="272" height="272" />
            <p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.

Fusce tempor justo vitae faucibus luctus.
            </p>
          </article>
        </section>
      </div>
    </div>
    <footer>
      <div class="footerText">
        <p>
Copyright &copy; Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
        </p>
      </div>
      <div class="footerLogo">
         <img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
      </div>
    </footer>
  </div>
</body>
</html>

这是CSS：

/* CSS Document */

* { margin: 0; border: 0; padding: 0; }

body { background: #8B0000; /* darkred */; }

body { margin: 0; border: 0; padding: 0; }

div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }

header { position: relative; background: #005b97; height: 140px; }

header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px;  }

header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}

header nav { position: absolute; right: 0; bottom: 0; }

header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }

div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }

div#mainContent img { margin: 12px 0; }

div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }

div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }

div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }

footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }

footer div.footerText { float: left; }

footer div.footerLogo { float: right; }

a { color: white; text-decoration: none; }

编辑1：

我再次检查了所有测量结果并仔细插入数字，直到它们为止满足主区域中三个均匀列的以下等式四面均匀塌陷的边缘区域：

TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px（宽度为   包装器）

TEXT_AREA = WIDTH + 2 * PADDING

BORDER = 1

当然，边距和填充设置为合理的值，这里有一些似乎可以解决这些限制的数字：

TEXT_AREA = 290px

MARGIN = 15px

BORDER = 1px

PADDING = 15px

WIDTH = 268px

转换为以下内容：

div#mainContent { float: left; width: 960px; padding: 15px 0; text-align: justify; }

div#contentLeft { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }

div#contentCenter { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }

div#contentRight { height: 900px; float: left; margin: 0 15px 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }

然而，即使现在一切都是统一的，我仍然会遇到缩放时的问题最右边的列落在其他列之下。一种解决方案是执行以下操作：

div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }

所以现在右栏没有右边距，但视觉效果是一样的。现在，当我缩小时，最右边的列不会掉落，而是它的右边距与其他人相比是如此之小，所以真的还有一个小问题。

编辑2：

好的，我已经做了一些搜索，找到了更好的解决方案。解决方案包括使div列元素之间的边距相同且具有左右边距自动调整。为了达到这个目的，我不得不这样做消除浮动，并使用“显示：内联块”，恕我直言更适合比漂浮物而设计的目的是为了这个目的：

div#mainContent { padding: 15px 0; width: 960px; text-align: center; }

div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/*15px*/; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }

div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }

div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }

div #mainContent section {text-align：justify; }

现在，在正常的缩放级别，所有左边距都是15px加上最后一个元素的右边保证金也将是15px。另一方面，如果我缩小，则有一些像素四舍五入，但是两边的舍入程度或多或少相等，哪个好一点。这适用于Firefox。

编辑3：

唉，我试过减少中间边距，这就产生了问题与Chrome一起消失，但其中一个div元素仍然在IE10中下降。

div#mainContent { padding: 15px 0; text-align: center; }

div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/* 20px increased from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }

div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 10px/* reduced from 15px */; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; overflow: hidden; }

div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 20px increased from 15px */ 0 10px/* reduced from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }

div#mainContent section { text-align: justify; }

编辑4：

我提出了一个适用于Firefox，Chrome和IE10的解决方案。基本上，我在三列中创建了三个div包装器并再次进行测量，确保所有测量都是对称的。这是源代码：

HTML文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="wrapper">
    <header>
      <div class="logo">
        <a href="http://pinco.com">
          <img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
        </a>
      </div>
      <div class="titolo">
        <h1>Benvenuti!</h1>
        <h2>Siete arrivati al sito pinco.</h2>
      </div>
      <nav>
        <ul class="menu"> 
          <li><a href="#">Menù Qui</a></li>
          <li><a href="#">Menù Quo</a></li>
          <li><a href="#">Menù Qua</a></li>
        </ul>
      </nav>
    </header>
    <div id="mainContent">
      <div id="wrapperLeft">
        <div id="contentLeft">
          <section>
            <article>
              <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
              </p>
            </article>
          </section>
        </div>
      </div>
      <div id="wrapperCenter">
        <div id="contentCenter">
          <section>
            <article>
              <p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
              </p>
              <img src="images/auto1.jpg" alt="Auto 1" width="268" height="268" />
              <p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
              </p>
            </article>
          </section>
        </div>
      </div>
      <div id="wrapperRight">
        <div id="contentRight">
          <section>
            <article>
              <img src="images/auto2.jpg" alt="Auto 2" width="268" height="268" style="margin-top: 0" />
              <img src="images/auto3.jpg" alt="Auto 3" width="268" height="268" style="margin-top: 0" />
              <p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
              </p>
            </article>
          </section>
        </div>
      </div>
    </div>
    <footer>
      <img class="footerLogo" src="images/auto4.jpg" alt="Auto 4" width="80" height="80" />
      <p class="footerText">
Copyright &copy; Pinco Inc.
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
      </p>
    </footer>
  </div>
</body>
</html>

CSS文件：

/* CSS Document */

*, body, article, secton, p { margin: 0; border: 0; padding: 0; }

body { background: #8B0000; /* darkred */; }

body { margin: 0; border: 0; padding: 0; }

div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }

header { position: relative; background: #005b97; height: 140px; }

header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px;  }

header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}

header nav { position: absolute; right: 0; bottom: 0; }

header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }

div#mainContent { float: left; padding: 15px 0; height: 900px; }

#wrapperLeft { float: left; margin-left: 15px; width: 305px; }

#wrapperCenter { float: left; margin: 0 15px 0 15px; width: 290px; }

#wrapperRight { float: left; margin-right: 15px; width: 305px; }

div#contentLeft { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }

div#contentCenter { border: 1px solid transparent; padding: 15px; width: 258px; height: 868px; background: #E00; overflow: hidden; }

div#contentRight { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }

div#mainContent section { text-align: justify; }

div#mainContent img { margin: 12px 0; }

footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-size: 12px; font-style: italic; font-weight: bold; overflow: hidden; }

footer img.footerLogo { float: right; }

a { color: white; text-decoration: none; }

Answer 1

这可能是由子像素舍入引起的。

缩放时，浏览器可能会计算像素值的像素值。由于将这些值向上或向下舍入，像素完美的布局可能会中断。（Different browsers以不同的方式处理此问题。）

我很幸运将您的像素值转换为百分比值以下是对我有用的价值观：

div#contentLeft,
div#contentCenter,
div#contentRight {
     margin-left: 1.1%;
     padding: 1.56%;
     width: 28.3%;
}

编辑：

这是另一种方法，它基本上将div#mainContent中的三个框居中，而不是用边距将它们紧密地隔开。它允许它们在缩放时有更多空间弯曲。

我从margin-left移除了div#contentLeft并添加了以下CSS以将这三个框置于中心位置：

div#wrapper {
  overflow:hidden;         /* ADDED THIS TO AVOID HORIZONTAL SCROLL */
}

div#mainContent {
     position: relative;   /* ADDED THIS */
     left: 50%;            /* ADDED THIS */
     float: left;
     padding: 30px 0px;
     text-align: justify;
}

div#contentLeft {
     position: relative;   /* ADDED THIS */
     left: -50%;           /* ADDED THIS */
     background: none repeat scroll 0% 0% #CCCCCC;
     border: 1px solid black;
     float: left;
     height: 900px;
     padding: 15px;
     width: 272px;
     /* margin-left:12px;     REMOVED THIS */
}

div#contentCenter {
     position: relative;   /* ADDED THIS */
     left: -50%;           /* ADDED THIS */
     background: none repeat scroll 0% 0% #EE0000;
     border: 1px solid transparent;
     float: left;
     height: 900px;
     margin-left: 12px;
     padding: 15px;
     width: 272px;
}

div#contentRight {
     position: relative;   /* ADDED THIS */
     left: -50%;           /* ADDED THIS */
     background: none repeat scroll 0% 0% #CCCCCC;
     border: 1px solid black;
     float: left;
     height: 900px;
     margin-left: 12px;
     padding: 15px;
     width: 272px;
}

即使Firefox完全缩小，这些框仍然会浮动在一行上。

css：在浏览器中缩小移动最右边的浮动div，低于其他div

编辑1：

编辑2：

编辑3：

编辑4：

1 个答案:

编辑：