覚えておきたい使えるCSSテクニックまとめ part.2

前回、自分の備忘録としてまとめていましたが、それなりに必要とされるテクニックがまだありますので、またそれを「使えるCSSテクニックまとめ」として記述しときます。

IE6での透過PNG

これについては、様々なJSライブラリでも解決できますが、filterを使わなければなりませんが、CSSでも解決できます。

* html .hoge {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

リンクのドットラインの削除

a {
	outline: none;
}

インラインレベル要素をブロックレベル要素にする

時と場合によりますが、インライン要素がブロックレベルと同じ働きをさせたいときに非常に有効です。

span {
	display: block
}

min-widthをIEで動作させる

通常は、下記のようにすれば問題無いのですが、IE6では、min-widthをサポートしていません。

.container {
	min-width:300px;
}

これをIEで動作させるためには、下記のようにHTMLとCSSを記述します。

<div class="container">
   <div class="holder">Content</div>
</div>
* html .container {
	border-right: 300px solid #FFF;
}

* html .holder {
	display: inline-block;
	position: relative;
	margin-right: -300px;
}

横のスクロールバーを消す方法

あまり活用性を感じませんが、ちょっと面白いの紹介します。

body {
	overflow-x: hidden;
}