- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 日記/2007/08/30 へ行く。
- 1 (2007-08-30 (木) 17:44:14)
- 2 (2007-08-31 (金) 07:43:04)
2007年8月30日の日記 †
皮 †
PukiWikiのスキン、結局こんなカンジに落ち着いたけどどうでしょうか?
もう少し手を加える予定だけど、当分はコレでおっけーでしょ。
ちなみに普段常用してるブラウザはFireFOXなんで、主にコレでCSSをダラダラ書き換えて検討してたんだけど、ふと思いついてIE7で見てみたら、色々と違う部分があるんですよ。
まず最初にハマったのが、ヘッダの背景画像が表示されなかった事。
原因はコレでした。
修正前: #header{ background:url("http://masa-ya.jp/skin/masa-ya/masaya-header.png")no-repeat top left; }
修正後: #header{ background:url("http://masa-ya.jp/skin/masa-ya/masaya-header.png") no-repeat top left; }
結局URLを指定した後の、
半角スペース1個有るか無いか
が運命の分れ道でした。
まあ書式的には修正後が正しいワケで、これについては俺のミスですわ。
しかしだ、IEとソレ以外のブラウザをお持ちの方は、ウチのページを両方で表示してみてください。
ビミョーに違うんですよ。
それは、
コンテンツの枠の面取がIEだと出ない
んですよ。
というのも、これは元々ベースに使ったスキンで、こんなカンジで枠の面取りを実現してるんです。
.bar{ background-color:#0000FF; word-break:break-all; padding:7px 15px 15px 15px; } .bar:before{ margin:-7px -15px -9px -15px; line-height:0.1; font-size:1px; height:7px; content:url("top_left.png"); display:block; background:transparent url("top_right.png") no-repeat top right; } .bar:after{ margin:10px -15px -15px -15px; line-height:0.1; font-size:1px; height:7px; content:url("bottom_left.png"); display:block; background:transparent url("bottom_right.png") no-repeat top right; }
やってる事は、まず.barで枠を作って、.barに対する:beforeと:afterで上下に白い面取りの画像を両脇に置いてるワケです。
ところがIE7は、どうもこの:beforeと:afterという部分を解釈しないようなのだ。
もうね、ブチキレですよ。
スペース1コに厳しいクセしやがって
こういうトコロは放置プレイなワケですよ。
今アルバイト先のページもリニューアル必死でやってるんですが、こっちもレイアウトテーブルを使わないCSSレイアウト仕様で頑張るつもりがIE6のCSSバグで妥協の嵐でございます。
そんなけしからんIE6を
無かった事
にする為のIE7ちゃうんかいオンドレが。
で、 †
実は先日までケータイ用スキンを置いてなかったんで苦情が1件のみ発生しておりました。
で、今日思い出して復活させておきました。
そういや先日製作中のアルバイトのページをケータイで表示させてみたら結構ビックリ。
今時のケータイのブラウザって、CSSで書いておけば結構見れてしまう。
まあ結局
クソIE6対策
のおかげで、そのまま流用は出来ないワケですが・・・
てなモンで、実験兼ねてケータイスキンもキチンとやってみたいなと思う今日この頃。
しかし遊びのページにこれ以上
現実逃避
してられんな・・・
そろそろブチ上げないとリミットが迫りつつ・・・・ギャー
コメント †
2007-08-31 13:57:17 (金)
- うに。最近セキュリティ関係で携帯電話からのブラウジングが多いのら(汗)もうIEのサポート辞めたいのら -- よ? 2007-08-31 16:43:04 (金)