Google ChromeのCSS 3対応状況

エ・ビスコム・テック・ラボ
2008-09-05 21:50:01
  • このエントリーをはてなブックマークに追加

横幅や高さの算出方法の指定 box-sizing:対応

 CSS 3のbox-sizingプロパティを利用すると、ボックスの横幅や高さにパディングやボーダーの大きさを含むかどうかを指定できる。ChromeではSafariと同じように、-webkit-box-sizingというプロパティ名で対応している。

Google Chromeでの表示。横幅を50%と指定したボックスを2つ表示したもの。パディングやボーダーは50%の横幅に含むように指定しており、box-sizingに対応していれば2つのボックスは並んで表示される Google Chromeでの表示。横幅を50%と指定したボックスを2つ表示したもの。パディングやボーダーは50%の横幅に含むように指定しており、box-sizingに対応していれば2つのボックスは並んで表示される
div{
width: 50%;
border: solid 30px #ffaa00;
padding: 30px;
background-color: #ffff00;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
 
div#column02{
border-color: #00ffff;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]