今更Mac IEなんてどうでもいいと思うのですが忘れないためにメモっておきます。
classを複数指定したときに何故だかMac IEだと子要素に指定した値が親要素に反映されてしまいます。
例えば親要素にborderの指定無しで子要素にborder:solid 1px #000;とか指定すると親要素にまでborderが作られてしまうんです。
解決方法として、
Win IE5とか5.5とかMac IEは早くこの世から消滅して欲しいですね。
フロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置される。
このバグのおかげで横幅をキチンと計算して横幅ピッタリになるようにレイアウトを組むとWIN IEでだけ大変不細工なモノになってしまいます。
なのでfloatを使って小さいブロックを並べるような場合win ie用に若干の遊びを付けて設定しなければいけません。コレのおかげでブロックごとの間隔がまばらになってしまってキッチリ並べたい時にすごく気持ち悪くなりますョ。
このサイトのサイドバーのサブタイトル部分で太字＆下に線付、文字の下の部分が切り取られてるようにするにはcssを、
＋
＝.subtitle {
font-family: Hiragino Kaku Gothic Std,"ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Std W8", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
margin: 0px 0px 0px 0px;
height: 10px;
overflow: hidden;
letter-spacing: -0.1em;
border-bottom: solid 1px #333333;
width: 160px;
}htmlのソースは、
<div class="subtitle">こんな感じにすると出来ます。</div>実際に適用すると、
こんな感じにすると出来ます。
heightでブロックの高さを決めてfont-sizeでブロックのサイズからはみ出る高さを設定して、overflow: hidden;ではみ出した部分を隠すように設定。widthで横幅も決めているので長い文章だとwidthで設定した長さを超える部分も隠されちゃいます。letter-spacingは文字の間隔の設定で若干ここでは詰めています。
続きを読むOSX限定の話なんですがcssでfont指定をする時に今までは
"ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック", "Osaka", Hiragino Maru Gothic Pro,verdana, arial, sans-serif;
こういう順番にしてました。この順番だとIEだとキチンとヒラギノ丸ゴシックで表示されるのですがsafariだとダメでした。これといって不具合もなかったのでそのまま放置してたのですが試しに順番を変えてみる事に
Hiragino Maru Gothic Pro,"ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック", "Osaka", verdana, arial, sans-serif;
このように並び順を変えてみるとsafariでもちゃんとヒラギノ丸ゴシックになりました。
原因はよく分かりませんがちょっと気持ち悪かったのでスッキリしました。
DIVを入れ子状態にして子の属性にfloatを入れた場合win IE以外のブラウザでは親が中に含んでるいる子の長さ(height)をちゃんと認識してくれないと言うなんとも困った現象があります。
親の属性に背景色やborderを設定していなければ見た目的には問題は無いんですが指定してる場合は困った表示になってしまいます。
これの解決方法としては親属性を閉じる直前（/div)に＜br style="clear:both;"/＞と入れれば大丈夫になります。
ただ、br入れてるもんだから変な隙間が生じてしまいます。これの解決方法がまだ見つけれていません。何かいい方法ないものかな？
2段カラム、3段カラムのところをよく見かけますが見るブラウザによってサイドバーがメインコンテンツの横ではなく、下に表示されているところをよく見かけます。
どうすれば思い通りの表示に出来るかいろいろ調べてみました。その結果3段カラムに関しては以下の通りにすればcssにちゃんと対応しているブラウザでちゃんと表示されるようになりました。
簡略してこの状態！まさしく入れ子状態ですね(笑)実際のソースはもっと複雑になってしまってマス・・・
これはまず全体を囲む要素の中で左右に分割して、さらにその左の要素の中で左右に分割しています。
各ID(class)の必要最小設定
#inbox { width: 760px}
#wrap { float:left; width:580px;}
#main { float:right;width:400px;}
#left { float:right;width:160px;}
#right { float:right;width:160px;}
htmlはこんな感じ
<div id="inbox">
<!-- ここからwrapエリア -->
<div id="wrap">
<!-- ここからメイン -->
<div id="main">
ここに"main"エリアに表示したいソースを入れてください。
</div>
<!-- ここまでメイン -->
<!-- ここから左サイド -->
<div id="left">
ここに"left"エリアに表示したいソースを入れてください。
</div>
<!-- ここまで左サイド -->
</div>
<!-- ここまでwarpエリア -->
<!-- ここから右サイド -->
<div id="right">
ここに"right"エリアに表示したいソースを入れてください。
</div>
<br clear="all" />
<!-- ここまで右サイド -->
</div>
先日のデザインリニューアルの時に、なるべくブラウザによって見え方が変わらないようにしようと思いいくつかのブラウザで確認しながら作っていきました。
win2000 IE6、 mozillaFirebird、opera7、Netscape6.2
mac OSX safari、IE5、camino、Firebird、opera6
これだけのブラウザではほぼ同じように見える作りになりました。
なんかネスケ4.7を忘れてるような気も・・・あった・・・・見てみよう・・・・・・・・・・・・・・・・・・・・・・
目も当てられない状況でした・・・。
さすがにｃｓｓ工夫して、中途半端にしかｃｓｓに対応していないブラウザのことまで考えてられないので無視することにしましたｗ
逆に全くｃｓｓに対応していないiCabの方が読みやすいかと思われます。
このチェックの時に初めてwin opera7をインストールして使ってみたのですが、なかなかいい感じですね。 動き方がなんかキビキビした感じで好きです。
あと、ネスケ7はごちゃごちゃ聞かれるダウンロードも余計なものたくさん入れられるインストールも嫌だったのでやめました。きっと未来もないし・・・ｗ
2xUPさんのUTF-8とMac IEとプルダウンでも紹介されている通り、MAC IEでだとUTF-8でのformのプルダウンの日本語が表示されません。人目に付くところでプルダウンを使ってないので別にいいと言えばいいのですが、編集画面の至る所でプルダウンが使われてて非常に使いにくかったりします。lang="ja"ってhtml宣言するところに入れてしまえば解決出来そうなんですが、編集画面の表示を吐き出してる場所が分からずに直すことが出来てません。
web巡回する時はsafariをメインで使ってるのですが、書き込み系はsafariだと一部文字が消えてしまったりして不安定なのでIEでやってます。試しにcaminoで更新してみようかとしてみたんですがtextareaでの挙動がちょっと不振なのとsafari同様Bookmarkletがうまく動かない。いったいどれで更新したらいいのだろう？？？
