CSS practice_html/css_WEB-ITnose で発生した問題

Webkit ブラウザでズームが 100% より低いと、フローティング レイアウトがおかしくなりますか?

例: 幅 1200: コンテンツ幅 (400-20-2)*3 + パディング幅 0 + 境界線幅 1px *2 辺 + マージン幅 10px*2 辺

<div class="div1">	<div class="div2">		<li class="li"></li>		<li class="li"></li>		<li class="li3"></li>	</div></div>

.div2 {    width: 1200px;    border: 1px solid #ddd;}.li {    float: left;    width: 378px;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}.li3 {    float: right;    width: 31%;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}

問題: -webket カーネルで起こることは、スケーリング中に境界線の幅が 1px であるため、ie では起​​こりません。 100% 未満に減少すると、3 番目のフロートが次のレイヤーに圧縮されます

解決策: 上記のコードのように、3 番目のボックスのパーセンテージを設定します。パーセンテージは 378/1200=31.5% になります。わずか 31%!