こんにちは。

今回は複数の情報をタブ切り替えするページを作ってたんですが、困ったことにIE6対応する必要がありました。

つまり、まぁ、普通より時間がかかると思われる案件なのですが、残念なことに締切が通常よりも遥かに短いです。

そんななかで出来るだけ慎重に作業は進めるのですが、やっぱり引っかかる箇所ってのはどうしても出てきてしまいます。

タブ切り替え自体は jQuery で行うのでとりあえずは問題ないんですが、まぁデザインというか、CSS周りですよね。困るのは。

そして案の定今回はそのタブ部分で引っかかりました。

やってることは大したことじゃなく、フロートさせて横並びにして、 margin で隙間をとってたのですが、タブデザインというのは、そのデザイン的にアクティブなタブと、下にあるタブ表示のコンテンツがくっついてるように（タブ部分が飛び出してるように）しないといけないので、 position に relative を入れて bottom に -1px を指定してみたところ、

見た目的には問題なかったのですが、マウスを当てると何故かガクガクします。

その時のCSSはこんな感じ。

なんかマウスのせた時だけ部分的に margin が消えてるようなそんなイメージ。

IEだししょうがないよなと思ったのですが、どうにも今回はメインで使用するのがIE6らしいので、ここは何とかしなくてはなりません。

ということで、順番にスタイルを消しては更新し、発生しなくなるポイントを探していくと、どうやら bottom:-1px がマズイらしい。

ということで、 bottom による指定を止め、 ネガティブマージンでやってみることに。

Chromeなどではこれでも同じ見た目でしたが、IE6はというと、何故か上手くいかず、ULに引いたボーダーの上に乗ってくれません。

なんでだろうーと思っていろいろ調べてみると、この状態で更に position : relative 指定すれば治るらしいという。

つまり、こう。

これで試してみたところ、うまくいきました。

きちんとタブらしい見た目にできました。

要は position:relative が鍵だったのでしょうか。細かいところは自分でもよくわかってませんが、似たような問題にぶつかった人は試してみる価値は有るかもしれません。

しかし、なんというか短期間でやるしかないのにIE6も面倒見るしか無い状況なのにあんま複雑なデザインにしないでもらいたいものです。

というよりIE6ってもうすぐサポート終わるのにこのタイミングで新規でIE6対応って…。しかも社内サイトでって…。

これってつまりXPやIE6が正式にサポート終了してからも自分たちはIE6使い続けますよ宣言してるようなもんですよね。

とりあえずそれらのPCがハードの寿命を迎えるまではサポートが終わってもこういう案件は来るのでしょうか…。

…と思ってたら、なんかXPサポート終了後でも残念なことに「ライセンス認証はできる」らしいです。つまり、インストールメディアが残っている限りまだ当面はハードの買い替えで存命できるということですよねこれって。

もうIEはバージョン遡って対応するのには１バージョンにつき10%上乗せでいいのに。

8ならプラス10%、7なら20%、6なら30%。
8と7なら10%+20+でプラス30%。6まで全部なら 10% + 20% + 30% = 60%…。うひぃｗ

まぁそのくらい出してくれるなら、よほど無茶なデザインや納期じゃない限り、まぁ考えてもいいかもしれませんが…。でもできればそこに対応する労力で新規をその数倍獲得したほうが胃に穴が開くリスクは減らせそうですけど…