css - CSS の問題: なぜ 100% の幅と 1 ピクセルの境界線が FF ブラウザーで表示され、Chrome では表示されないのですか?

Question

私は1140px の cssgrid.net フレームワークを使用しています。コンテンツに 12 列、サイドバーに 2 列、10 列を使用し、border-right: 1px をサイドバーに配置します。なぜ 10 列が FF ブラウザーにあるのに、Crhome にはないのですか? マークアップ:

<div id="sidebar" class="twocols"></div>
<div id="main_content" class="tencols"></div>

スタイル:

#sidebar { border-right: 1px solid red }

Answer 1

あなたはそれに定義する必要があるかもしれませんbox-sizing。すべてのブラウザで動作します。

#sidebar { 
  border-right: 1px solid red;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
 }