今さらながらに Mac の標準ブラウザ (ですよね?) である Safari のことも考えて CSS を修正してみました。記事ページなどの前の記事次の記事の表示崩れです。どうやら Safari では li 要素を display: inline で横に並べると、横幅が確保されず複数行になってしまうみたいです。display: inline なので width プロパティで横幅を指定するわけにいかないのです。逆に display: block なら横幅を指定しなければいけないのですが。

IE でごらんになっている方にはわからないと思いますが、今まで CSS の before、after 擬似要素と content プロパティを使って < と > を表示させていたのですが、最近 (自分の中で) 主流となっている、padding プロパティで横幅を増して background プロパティで背景画像としてアイコンをつける方式に変えました。これだと、 IE7 なんかでも要素の周りに画像をつけられるようです。以前からこの方法で、サイト外にリンクしているアンカーには矢印マークを表示させています。

相変わらず代替スタイルシートは使えませんが、それ以外では素晴らしい出来栄えだと思いますよ、Safari は。こんなにいいブラウザがあったなんて、Mac を使っている人がちょっとうらやましくなったりします。

2008年03月27日 木曜日 21時22分

© 2006-2017 小野塚裕也
トップ ページ