Category CSS Archive
当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。
なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。
- Windows IE6
- Windows IE7
- Windows IE8
- Windows Firefox2
- Windows Firefox3
- Windows Firefox3.5
- Windows Google Chrome3
- Windows Opera9.6
- Windows Safari4
- Macintosh Safari4
- Macintosh Firefox2
- Macintosh Firefox3
- Macintosh Firefox3.5
結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。
統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。
CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。
CSSStickyで紹介されている(X)HTMLとCSSだと全体を包むdivがありません。よくあるサイトのデザインとして全体を包んだdivの左右にドロップシャドウをつけた画像を縦軸にリーピートさせるものがあります。今回は このCSSStickyFooterを少々改造して全体を包むコンテナを含んだワイヤーフレームに対応させてみました。
ネタもとはここらへんです。CSS Browser Support
| Selector | IE8 | IE7 | IE6 | FF3.5 | FF3.0 | FF2.0 | Chrome | Op9.0 | Mac Saf4 |
Mac Saf3.2 |
|---|---|---|---|---|---|---|---|---|---|---|
| * | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| .class | ○ | ○ | △ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| #id | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E F | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E > F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E + F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E ~ F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E[attr] | △ | △ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E[attr=val] | ○ | ○ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
| E[attr~=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| E[attr|=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| E[attr^=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| E[attr$=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| E[attr*=val] | ○ | × | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| :first-child | ○ | △ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
| :link | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :visited | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :lang() | ○ | × | × | ○ | ○ | ○ | ○ | △ | ○ | ○ |
| :before | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::before | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :after | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::after | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :first-letter | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::first-letter | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :first-line | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::first-line | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :root | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :last-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :only-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :nth-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-last-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :first-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :last-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :only-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-last-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :empty | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :not() | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :target | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :enabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :disabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :checked | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。
何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたoverflowプロパティを親要素であるliに指定し、置き換える画像の高さを指定することにより回避出来ます。
XHTML
<ul id="globalNav>
<li id="nav1"><a href="#">Nav1</a></li>
<li id="nav2"><a href="#">Nav2</a></li>
<li id="nav3"><a href="#">Nav3</a></li>
<li id="nav4"><a href="#">Nav4</a></li>
</ul>
CSS
ul#globalNav li {
display: inline;
float: left;
height: 35px; /* 置き換える画像の高さ */
overflow: hidden;
}
li#nav1 a {
display: block;
width: 50px; /* 置き換える画像の幅 */
height: 0;
padding-top: 35px; /* 置き換える画像の高さ */
background: url(../img/bg_xxx.gif) no-repeat 0 0; /* 置き換える画像 */
}
以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。
IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません（ページズームを使えと言う感じではありますが）。
以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。
今回はIE8をのぞいたモダンブラウザに適応させるhtml:not(:target) bodyを使ってさらに上書きするというハックのダブルがけをしています。
また、個人的にはメイリオはあまり好きではないのですのが、今回も念のためにメイリオをセットに入れています。
IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。
inline-blockを使ったマルチカラムレイアウトのデモ
通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いますが、今回はfloatを使わずに2段組のレイアウトを組んでみます。HTMLのソースコードは以下の通り
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="primary">
<div class="section">
<p>文章</p>
<p>文章</p>
</div>
<div class="section">
<p>文章</p>
<p>文章</p>
</div>
<!-- // end #primary --></div><!--
--><div id="secondary">
<div class="section">
<p>文章</p>
<p>文章</p>
</div>
<div class="section">
<p>文章</p>
<p>文章</p>
</div>
<!-- // end #secondary --></div>
<div id="footer">
<address>
Copyright
</address>
<!-- // end #footer --></div>
<!-- // end #container --></div>
inline-blockを指定した要素同士は改行コードの影響を受けて微妙に隙間が出来てしまうのでコメントを挿入して改行コードを埋めています。
