Poturi

CSS Hacks

正しいコードを書いているのにうまく表示されないことがたまにあります。ここでは、そういった一筋縄ではいかないときの対処法をまとめます。

clearfix

たとえば<ul>タグを使ってメニュー項目なんかを作るとき、<ul>と<li>を"display: box;"にします。それで<li>を"float: left;"にすると、<ul>の高さが正しく解析されません。floatがclearされないのが原因です。そういうときはclearfixクラスを作り、clearを適用したい要素に設定します。

サンプルページ

サンプルコード

<html>
<head>
<style type="text/css">

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

.clearfix {
	display: inline-table;
	min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

ul {
	display: block;
	border: 5px solid red;
	margin: 40px;
	padding: 0;
}

li {
	display: block;
	float: left;
	border: 5px solid blue;
	margin: 20px;
	padding: 20px;
}

</style>
</head>
<body>

<ul class="clearfix">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

</body>
</html>

参考サイト

Safariの日本語ボールド

Safariには、デフォルトでは日本語のボールドが適用されないバグがあります。それを回避するには、CSSで明示的にヒラギノフォントを指定します。

font-family: "Hiragino Kaku Gothic Pro", sans-serif;

IEのUTF-8文字化け対策

XHTMLドキュメントを作成するときの基本的なヘッダは次のような感じです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
</head>

しかし、なぜかIEで文字化けしてしまうので、headタグ内に次のmetaタグを入れておきます。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

IEは一行目のxml宣言文を正しく解釈できないようです。必ず、http-equivで文字コードを指定する必要があります。

IE以外のブラウザでは正常に動作するJavaScriptが、IEではなぜかエラーが頻発して、どこをどうやっても直らず半日ほど格闘して、結局http-equivが抜けていたのが原因だったことがあります。盲点になりやすい部分なので、気をつけましょう。

© 2007 Poturi.