書式
-webkit-box-sizing:ボックスモデルの種類
対象
--
継承
--
初期値
---
対応ブラウザ
Safari 3以降
解説
ボックスモデルを指定します。これはIE6以前のブラウザおよびIE6の互換モードでのボックスモデルか、他ブラウザでのボックスモデルかを指定します。border-boxを指定するとIE6以前の互換モード、content-boxを指定すると他ブラウザでの標準ボックスモデルになります。
サンプルコード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
body { margin:0px; }
#box1 { position:absolute; top:10;left:10px;
background-color:orange;
margin: 10px;
padding:10px;
width:200px;
height:100px;
-webkit-box-sizing: border-box;
}
#box2 { position:absolute; top:120;left:10px;
background-color:yellow;
margin: 10px;
padding:10px;
width:200px;
height:100px;
-webkit-box-sizing: content-box;
}
--></style>
</head>
<body>
<div id="box1">box1 : サンプルテキストです。<br>Sample Text</div>
<div id="box2">box2 : サンプルテキストです。<br>Sample Text</div>
</body>
</html>