ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS practice_html/css_WEB-ITnose で発生した問題
CSS practice_html/css_WEB-ITnose で発生した問題
- WBOYオリジナル
- 2016-06-24 11:21:241026ブラウズ
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%!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。