IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

  • このエントリーをはてなブックマークに追加

昔できなかったことでも、時間がたってからやってみたら以外にすんなり解決することってありますよね。それがこれです!むかーし、がんばってこれを解決する方法を考えに考えまくったのですが、答えが出なかったんです。だけども、いまやって見たら案外すんなり答えが出ました。


dt,ddを横並びにして、テーブルっぽくするやり方なのですが、多分、display: inline;でfloatしているボックスのmarginが2倍になるバグを回避する方法を昔はしらなかったため、IEハックつかって、半分のmarginいれてたりしたのだけれども。今display: inline;使って試してみたらすんなり!以下詳細

dl.table {
	margin: 1em 20px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #f5f5f5;
}

dl.table dt {
	margin: 0;
	margin-right: -13em;
	padding: 0.2em 0;
	border-top: 1px solid #ccc;
	float: left;
	clear: both;
	display: inline;
	width: 13em;
	text-indent: 10px;
}

dl.table dd {
	margin-left:13em;
	padding: 0.2em 10px;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	background-color: #fff; 
}

dl.table {
	/*\*/
	min-height: 1px;
	_height: 1%;
	/* */

	/*\*//*/
	overflow: hidden;
	/**/
}

dl.table::after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

clearfix使ってます。clearfixが重要なのかな?

結構シンプル!?

昔挫折したことでも、再び挑戦してみる事って大切ですね!

でもま、表のときは無理やりこれつかわずテーブルでやるほうがいいですね。

追記 : 重要なのはdtのmargin-right: -13em;とclearfixにはいっているdl.tableの幅or高さ指定みたいです。

追記 : どうやら、IE5.5、IE5.0は3pxずれるみたいです。

注意

dlの左側にpadding、またはdtの左側にpaddigを入れるとずれるみたいです。

なので、dtの左をborderの背景と同じ色などをいれてあけるなどすればうまく同じように表現できます。結構無理やりですが;。

body#entry3 dl.test2 dt {
	border-left: 1em solid #f5f5f5;
}

コメント : 1

コメントフォーム
さいころ : 2008年06月02日 (月) 01:09

IE7しかないため、確認できませんでした><
ブラウザの互換性はWebデザインをやる上で面倒そうですね。
「_height」なんて初めて見ました。
IE6のバグを利用している模様?
>昔挫折したことでも
ですよねー。
プログラミングでも、昔できなかったことを、もう一度やると、すんなりとできたりします。
少しだけ自分の成長を感じることができますw
問題の解決法が、本ではあっさりと書かれていることが多いですね。ショックw

トラックバック : 1

http://develo.org/mt/mt-tb.cgi/2

dl,dt,ddの擬似テーブルで3pxのずれを直す方法 : 2010年4月20日 09:44
dtとddを横並びの擬似テーブルにする場合、IE6だと3pxのずれが生じます。そ

このページの先頭へ戻る