2009.10.25

IE8「positionの変」

もう疲れたよ、パトラッシュ…
前回のtable a img { }問題を検証中にIE8で自サイトみてイヤになって、真央ちゃんみてました。
なんだろうねぇ。マスコミは変な雰囲気作ってますな。真央ちゃん凄かった。ジャンプは課題ってだけだろうに。
さて、長くなりそうなので、本題。フィギュアは別に書こう。

うぉ〜んIE8で(;ω;)ヘッダーの position:absolute の配置がアホになってるのです。
x方向の基準点が後に続くdivのmargin分右にずれてます。
基準点は「ブラウザの表示画面の左上」ですよ。
親要素はbodyでposition指定は当然ながらありませんよ。

フッターを画面の下に固定するheight:100%の技を使っておるのです。
position:absoluteでヘッダーを浮かして、後に続くpisition:relative指定のdivにヘッダー分のpaddingをとり、ヘッダーをz-indexで前に持ってきた構成です。
重なり順が先となった後に続くdivを基準と見なしてるんでしょか。
height:100%をどうしても使いたいので、これは、もうお手上げ。
タイトル含むヘッダーが一番先という文法も変えたくないし、晒し者にするしかありません。

後記:解決法ですが、absoluteの位置指定を

と、しっかりしてやらんとダメなようです。

そうそう、以前書いた最後のboxのclearfixの件ですが、Windows版 Firefox/IEで謎marginが取られてしまうことも判明しました。
がっかり。
もう一つ。positionを使ったボタンの下の内容がWin版Firefoxでおかしな事になってるし…
もう疲れ…た…。キッ。

2009.10.23

うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

前々回IE8に文句を付け、前回訂正してお詫び申し上げたんですが。
なかなか自分の環境では状況を再現できませんで、今回、やっと発生条件がわかりましたのでご報告いたす所存。
くどいですがもう一度、これまでの状況説明。

  • 画像のアイコン群をテーブルで並べてリンクを張った
  • どうしても無くならない隙間が画像の下にできる(リンクを張らなければ問題ない)
  • 画像含むa要素を display :block; にすると画像の上に謎のスペースが発生し、見切れる
  • 何故か、vertical-align:bottom;の指定を抜くと解消

まずはこちら、IE8お持ちでしたらご覧下さい。
戻ってくるリンク貼ってませんので、ブラウザでお戻り下さい。

IE8ではfont-familyの問題はありません。
問題は、niftyドメインがIE8の互換表示でIE7スタンダードでレンダリングされる現象でした。

全然問題ないよ!という場合はすみません。再現した環境は
windows XP/IE8
だす。(vistaでも不具合を確認できました。)
キャプチャを貼っときますです。
制作環境は4.01 Transitional charset=Shift_JIS (Dreamweaver CS4で作成)となっとります。
tableはcollapse。
table関連のborderは0。
ブロック化したa要素に赤いborderを指定して、画像と同じheightを持たせてあります。
IE8

Firefox 

以下は、IE7以前のIE対策となります。

結論を急ぐと発生条件は、
imgに対する vertical-align:bottom; の指定と
全称セレクタやbody に指定したヒラギノやメイリオを含むfont-familyの組み合わせ。
img の vertical-align指定が必須な場合。

と指定していたら、それを

とすると何故か解消。osakaとか入っても大丈夫です。
その後、bodyや外のボックスに対してヒラギノ、メイリオ含むfont-family指定しても何故か謎の隙間は現れません。

全称セレクタは上書きされるはずなのですが、font-familyが上書きされないような???

もっと良いのは

と特定のimg要素をブロックにしてしまうことです。(hogeはクラス指定)
そうすると、遠慮無くfont-familyも、他の画像のvertical-alignも指定できます。
vertical-alignは判るような気がしないでもないですが、なんでfont-familyが影響するんでしょうか?
line-heightあたり?
っていうか、IE8がビミョー<(`^´)>なのか、なんなのか。どっちなんだい?
safariもイケテルとはいえ、絶対的だと言う訳ではありませんからねぇ。IE8が偉いのかも

そうそう、自サイトデザインをちこっと変えたんですが、safariバグってます。
margin-rightを%指定、margin-leftをautoに指定で、不審な挙動を。
興味がおありでしたら、『さわやかまみれ』のcontactページご覧下さい。画面を横に狭めてゆくと、おもろいことが起こります。ムキーッ。(現在は起こりません)

2009.10.12

‘バイオレンス’がもたらす効能

007カジノロワイヤルをなんでか、途中から最後まで見てしまった。
爆発物で相手がバーンってなるところから何かをしながら見て、列車の中で「オメガだ」というところから真面目に見た。
それだけ魅力的な映画だったということか。
悪役の人、クリストファー・ウォーケンに似てた。若返ったのかと思って焦った。
それよりもなによりも、カジノのディーラーの人がFilterの
リチャード・パトリックそっくりだったw
それが切っ掛けで最後まで見たってのが正しいかもしれん。
もっと途中から母・お千も見だして、全裸拷問シーンも一緒に鑑賞。
その後の恋愛シーンがつまらな長かったので、タマが無事だったのかと下ネタを飛ばし、きゃっきゃっして微妙な空気になるのを回避。
と、いうより、どうして普通の拷問じゃないのか、非常に気まずかったw。
見終わって「ボンド、ジェームズ・ボンドだ。」というお約束の台詞のマネをひとしきりお千に披露するほどハイになり、今は、一体何だって貴重な時間を割いて途中からなのに全部見て、ブログにまで書いているのか疑問に思っている。

2009.10.01

際限なくミイラとりがミイラ


えーと、モニタキャリブレーションツールというのを買いました。
もっと早く買うべきだったんでしょうが、いかんせん高価い。そういうイメージがあって、最低15万くらいするよなーと大昔の常識で調べもしなかったら、今は2−3万位であるんですね。
adobeガンマが健在のころは、大して困りもしてなかったのですが、
OSXの「ディスプレイキャリブレータ・アシスタント」はなんか…難しい。
上下左右方向の操作がうまくできん。
業を煮やして買っちゃいました。
「Spyder3pro」
imacだし、入門機と割り切って安価なものを選んでみました。

予算が許すならもっと複雑な多機能なソフトと高性能だと評判のi1 Display 2をご購入がよいかもしれません。
こういうキャリブレーションとかいうような事は、もっともっとと性能や機能性を求めてしまうもので、実売価格に1万弱しか差がないのだったら最初から評判の高いものを買って置いたほうが、後悔は少ないものです。

と、言うのもSpyder3proに対する感想が「あれ…こんなけ?」でしたから(゚ー゚;

キャリブレートの結果の如何は別として、あまりのそっけなさに、なにか、こう、物足りなさを感じてしまったのですねぇ。
アプリケーションの日本語も「〜ます。です。」とか、変ですしw。フリーソフトじゃないんだからねぇ。

でも、結果はおおむね満足です。
目測よりはずっといい。
赤かぶりを取ろうとして、取れたつもりで全然取れて無かったです。
今まであんまり緑の微妙なところが見えてなかった感がバリバリします。itunesのアイコンのスペクトルがすごく綺麗だす。
しかもちょっと青かったようで、それに慣れた目には無彩色が暖かく、若干黄色いように見えてしまうんですが、慣れてくると、黄色くもないような…
蛍光灯も一応、三波長系昼光色とかにしてるのですが、プロ仕様!って訳じゃないので、その所為で若干黄色く見えるのかもしれません。買い換え時じゃないけど、蛍光灯変えてみようかなぁ。フードも手作りしたりして…ん?
と、キャリブレーションツールなぞ買うと、このような際限ないはめに陥るので要注意です。

まったく参考にならんとおもいますが、デジカメで取った画像。
左が純正プロファイル、右がガンマ1.8 6500kでキャリブレートしてできたプロファイル。
他にWEB作成用にガンマ2.2のも作りました。環境設定のディスプレイ→カラーでプロファイルを切り替えて使います。です。

テクニカルなことは疎いので、それ以外で気付いたことをひとつ。
センサーをモニタの上から吊す時に、モニターの顎を上げてないとセンサーが浮きます。です。
モニタとセンサーの間に隙間があると正しい計測ができません。
一回目、ばっちり浮いていて、どーよ?と言う結果になりますた。
えー、環境光の写り込みが変わるよう。と思われるでしょうが、そこまでの微細なキャリブはしません。たぶん。

2009.09.26

うるぁぁぁ〜っIE8っ!vol.2 検証してみた

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

(22年 4月16日 加筆修正)
「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

前回ie8に文句を付けた訳ですが。
すんませんっ。
tebleの中のリンク画像がvertical-align:bottom; でずれるのか、簡単なソースで検証してみたら全く問題ありませんでした。
一応、検証用に作ったページをアップしてみました。IE8環境のある方はご覧下さい。
tableの中の<a><img></a>の表示
濡れ衣だったということが判ります。

「マイクロソフトの互換表示リストに使用ドメインがリストアップされている。」に該当するniftyのサイトに上げ直したので、もしIE8/IE7以前のバージョンとメイリオをお使いであれば再現されるかもしれません。

訂正してお詫び申し上げます。
でも依然もとのページはvertical-align:bottom;を残すと、IE8では表示が変なままなのれす。
overflow:hidden;的な挙動がこちらのバグと似てるので、どっかのa要素のbackground指定が継承されちまってるのかなぁ。
とにかく、正しくない情報を提供して申し訳ありません。
今のところ判っているのは
・問題のあったソースでは、img{vertical-align:bottom;} の指定が無い場合、正常に表示する。
ちゅーことだけです。
次回の出向で原因を明らかにしたいところなんですが、とりあえずは解決してるし…
もやもやするっす。

PageTop