例: 幅 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%!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
