IE、Operaではbutton要素の中身にもtext-indentが効く

日本語の文章を書くとき、段落の最初の行は1文字空けることが多いですが、そのようなときなどにCSSの text-indent がよく使われます。

字下げだけでなく、たとえば次のように見出しの前に記号を付けて目立たせるといったことが可能です。

h2:before {
  content: "●";
}
h2 {
  text-indent: -1em;
  margin-left: 1em;
}

さて、本題。 text-indent を指定したブロック要素の中にbutton要素を書くとどうなるでしょう。

<!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>
<title>IE、Operaではbutton要素の中身にもtext-indentが効く</title>
<style type="text/css">
p {
  text-indent: 10em;
}
</style>
</head>
<body>
<p><button>button要素</button></p>
</body>
</html>

このHTMLを表示させると、 Firefox や Safari ではボタン左側に10em分のスペースが空きます。

オリジナル画像
図1Firefox 3.5 での表示

ですが、 IE や Opera では、button要素の中身もインデントが行われてしまい、ボタンが非常に横長に表示されてしまいます。

オリジナル画像
図2Opera 9 での表示

これを防ぐには、button要素に text-indent: 0; を指定すればよいのですが、これも IE 7 以下でブロック要素の最初にbuttonがあるときは、悲惨なことにボタンのインデントが解除されてしまいます…。

オリジナル画像
図3IE 7 での表示

2012年9月16日追記Operaは2009年のバージョン10で Firefox や Chrome と同じ挙動になりました。