rect(top,right,bottom,left) 標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css"><!--
p.eg1 {clip:rect(5px,80px,90px,5px); position:absolute; top:0px; left:100px; width:100px; height:110px;}
p.eg2 {clip:rect(5px,110px,90px,5px); position:absolute; top:30px; left:300px; width:100px; height:110px;}
--></style>
<p class="eg1">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
<p class="eg2">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
<style type="text/css"><!--
p.eg1 {clip:rect(5px,80px,90px,5px); position:absolute; top:0px; left:100px; width:100px; height:110px;}
p.eg2 {clip:rect(5px,110px,90px,5px); position:absolute; top:30px; left:300px; width:100px; height:110px;}
--></style>
<p class="eg1">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
<p class="eg2">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
*1 -ie7ではブラウザの「標準モード」において「clipプロパティ」は、認識されません。ie8では認識されます。 
Doctypeスイッチ
*2 positionプロパティを指定されたマージンを有する要素(h1-h6, p, blockquote, ul, fieldset, form, ol, dl, dir, menu)は、ieとそれ以外のブラウザで微妙にレンダリングが異なります。具体的には、ieにおいてページ最上部のマージンは無視され、左右のマージンは維持されます(blockquote, menu)。それ以外のブラウザにおいては、すべてのマージンが維持されます。 HTML 4.0のためのデフォルト・スタイル・シート
Doctypeスイッチ*2 positionプロパティを指定されたマージンを有する要素(h1-h6, p, blockquote, ul, fieldset, form, ol, dl, dir, menu)は、ieとそれ以外のブラウザで微妙にレンダリングが異なります。具体的には、ieにおいてページ最上部のマージンは無視され、左右のマージンは維持されます(blockquote, menu)。それ以外のブラウザにおいては、すべてのマージンが維持されます。
HTML 4.0のためのデフォルト・スタイル・シート
rect(top,right,bottom,left) 互換モード
<style type="text/css"><!--
p.eg1 {clip:rect(5px,80px,90px,5px); position:absolute; top:0px; left:100px; width:100px; height:110px;}
p.eg2 {clip:rect(5px,110px,90px,5px); position:absolute; top:30px; left:300px; width:100px; height:110px;}
--></style>
<p class="eg1">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
<p class="eg2">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
p.eg1 {clip:rect(5px,80px,90px,5px); position:absolute; top:0px; left:100px; width:100px; height:110px;}
p.eg2 {clip:rect(5px,110px,90px,5px); position:absolute; top:30px; left:300px; width:100px; height:110px;}
--></style>
<p class="eg1">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
<p class="eg2">子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。<br>
- グルーチョ・マルクス</p>
auto (ボックス全体を表示)
<style type="text/css"><!--
.eg1 {clip:auto; position:absolute; top:10px; left:100px; border:solid 10px #9cf;}
.eg2 {clip:rect(15px,140px,200px,15px); position:absolute; top:10px; left:350px; border:solid 10px #9cf;}
--></style>
<img src="img/simokita.jpg" alt="下北沢" width="140" height="200" title="下北沢" class="eg1">
<img src="img/simokita.jpg" alt="下北沢" width="140" height="200" title="下北沢" class="eg2">
.eg1 {clip:auto; position:absolute; top:10px; left:100px; border:solid 10px #9cf;}
.eg2 {clip:rect(15px,140px,200px,15px); position:absolute; top:10px; left:350px; border:solid 10px #9cf;}
--></style>
<img src="img/simokita.jpg" alt="下北沢" width="140" height="200" title="下北沢" class="eg1">
<img src="img/simokita.jpg" alt="下北沢" width="140" height="200" title="下北沢" class="eg2">
