softie note: css で気をつけること

メモ

Gecko 1.9(Firefox 3) からサポート。
※ 参照: (mozilla.org) display - MDC Doc Center
→ https://developer.mozilla.org/en/CSS/display
IE7 (以下?)は、インライン要素への適用をサポート(block 要素へ適用しても効かない)。
※ 確認 IE7/Windows XP
IE7 (以下?)は、ブロック要素へ display:inline;zoom:1; を適用することで代用。
(yomotsu.net) 「書籍などに紹介されていない display : inline-block について」
→ http://www.understandard.net/css/css008.html
※ スタイルシートを使用しない方が読みやすいかも (2011.02.22 追記)
IE7 (以下?)で display:inline;zoom:1; を適用することで逆に起こる問題について。
(webtech-walker.com)「hasLayoutプロパティがtrueで発生するバグ - Webtech Walker」
→ http://webtech-walker.com/archive/2007/11/27033016.html
※ (2011.02.22 追記)

検証用

iframe

iframe 文書の HTML

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>display:inline-block</title>
 <style type="text/css">
  * { font-size:100%; }
  body { font-family:arial; sans-serif; }
  body>div { margin-bottom:0.5em; }
  .div, .span {
   display:inline-block;
   padding:0.2em 0.5em;
   border:solid 1px gray;
   font-weight:bold;
  }
  div.block { border:solid 1px gray; padding:1em; }
 </style>
 <!--[if lte ie 6]><style type="text/css">
  body div { margin-bottom:0.5em; }
  body * div { margin-bottom:0; }
 </style><![endif]-->
 <!--[if lte ie 7]><style type="text/css">
  .div, .span { vertical-align:middle; }
 </style><![endif]-->
</head>
<body>
 <h1>display:inline-block</h1>
 <div class="block">text element<div class="div">div style="display:inline-block;"</div>text element</div>
 <div class="block">text element<span class="span">span style="display:inline-block;"</span>text element</div>
</body>
</html>

softie note

2011年2月21日月曜日

css で気をつけること - display:inline-block

メモ

検証用

iframe 文書の HTML