これらのブラウザでズーム レベルを上げると、Firefox と chrome の両方で奇妙な現象が見られますが、CSS には問題はありません。これが全体の話です：
3 つの右フローティング ライトを含む右フローティング トップレベル div があります。内側の 3 つの div には、すべてのボックス モデルの測定値がピクセル単位で含まれており、合計すると囲んでいるコンテナーの幅になります。ブラウザーのサイズが 100% の場合はすべて問題ないように見えますが、CTRL + スクロールホイールまたは CTRL + マイナスでブラウザーを小さくし始めると、右端の余白が急速に縮小し、最終的にはゼロになり、右端のフロートされた内部 div が下に落ちてしまいます。他の2つ！
私はこれを理解することはできません.ブラウザコードで整数除算が間違って実行されているようですが、残念ながらfirefoxとchromeの両方が同じ結果を表示します.
これが例です（CTRL-マイナスでズームアウトして、私が何を意味するかを確認してください）：
少し絞り込むために、関心のあるタグは次のとおりです。
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-resized
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 © 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：
私はすべての測定値をもう一度チェックし、メイン領域の 3 つの均一な列について次の式を満たすまで、慎重に数値を入力しました。
TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px (ラッパーの幅)
TEXT_AREA = 幅 + 2 * パディング
ボーダー = 1
もちろん、margin と padding が適切な値に設定されていることを条件とします。これらの制約を解決する、問題ないように見えるいくつかの数値を次に示します。
TEXT_AREA = 290px
余白 = 15px
ボーダー = 1px
パディング = 15px
幅 = 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; }
ただし、すべてが均一になった今でも、ズームアウトすると右端の列が他の列よりも下に落ちるという問題が発生します。1 つの解決策は、次の手順を実行することです。
div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
そのため、右の列には右マージンがありませんが、視覚的な結果は同じです。今、ズームアウトすると、一番右の列は落ちませんが、その右マージンは他の列に比べて非常に小さいので、実際にはまだ小さな問題があります.
編集2：
OK、さらに検索を行ったところ、さらに優れた解決策が見つかりました。解決策は、div 列要素間の余白を同じにし、左右の余白を自動的に調整することです。これを達成するために、フロートを廃止し、「display: inline-block」を使用する必要がありました.
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 セクション { text-align: justify; }
現在、通常のズーム レベルでは、すべての左余白は 15 ピクセルに、最後の要素の右余白も 15 ピクセルになります。一方、ズームアウトすると、ピクセルの丸めが行われますが、丸めは両側にほぼ均等に適用され、多少改善されます。これは Firefox で動作します。
編集3：
残念ながら、中間のマージンを少し減らしてみました。これにより、Chrome で問題が解消されましたが、IE10 では div 要素の 1 つがまだドロップダウンしています。
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 で動作するソリューションを考え出しました。基本的に、3 つの列の周りに 3 つの 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 © 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; }