IE8でもOperaでもEC-CUBEの商品管理で確認ボタンをfixedする
わけの分からないタイトルでアレなんですが。
まず最初に、なにがしたかったかというと、EC-CUBEというECパッケージがあるんですが、その管理ページがいろいろと使い勝手が悪くて、たとえばその一つに商品登録（と更新）をするとき、縦にやたらめったら長いページを見せられて、しかも「確認」ボタンがそのページのいっちばん下にあるわけなんですよ。それで商品を登録したり更新したりするたび毎回毎回毎回毎回縦にやたらめったら長いページのいっちばん下までスクロールしないと「確認」ボタンが押せない。これはちょっとユーザビリティがクソ過ぎるだろと思ったわけですよ。
で、どうしたかったかというと、要は「確認」ボタンをディスプレイ上の定位置に配置してページをスクロールしようが何しようがそこから動かなければ、それを押すのにわざわざスクロールさせる必要はないわけです。
ま、普通はCSSでfixedを使いますわな。
<div id="submitBtn" style="position:fixed;bottom:2em;right:1em;"> (略) </div>
こういった具合に。
ところがIE8だとこれがきちんと動いてくれないわけですよ。Opera10では普通に見えてるのに。それで相当に頭をひねったわけですが、たとえばIE8でもまだfixedを実装してないんじゃないかとか、table内の要素はfixedできないんじゃないかとか、だとしたらjavascriptで動かすしかなさそうだなーとか。しかしそうではなくて、実はもっと意外なことでありまして、
http://nabolog.seesaa.net/article/121580214.htmlInternet Explorer 7 and later. Fixed positioning is only supported for pages using a strict directive.
というわけでIE8には謎仕様があって、htmlソースのほうをstrictモードにしろという御託。なおかつEC-CUBEはstrictに書かれてないためtransitionalと宣言されていて、それでIE8はfixedの機能を停止していたというふざけたお話。
ところがこれには抜け道があって、EC-CUBEのhtmlソースのDOCTYPE宣言を勝手にstrictにしちゃえばいいんですよ。つまり、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
こうなっていたのを、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
こうすると。
そしたら！見事に！fixedが有効になりました！
ところが！なんと！EC-CUBEの記法がstrictでないから画面がごちゃごちゃーっと崩れた感じになるんですな。別に実用上に問題はないんですが、うちのスタッフが戸惑いそうなんで、これは放置できない。そこで、ダメ元で「互換モード」ボタンを押してみたら、まんまとうまく表示されてやんの。うほー。ちょっと検索してみたら、自分で「互換モード」ボタンを押さなくても、metaタグの埋め込みで自動切り替えされるらしい。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
これでわざわざ「互換モード」ボタンを押さなくても、このページを表示しただけで互換モードになる。さ、これで万事解決、か？
んなわきゃーないわけで。自分はOpera10というブラウザを使ってるんですが、これで見るとIE8の標準モードと同じような見え方をしている。どーせOpera使ってるのは自分だけなんだし、がまんしとけばいいんですが、どーにも気持ちが悪い。
と思いきや実は抜け道があって、DOCTYPE宣言を2つ書けば、どっちのブラウザでもfixedされるし表示も崩れないしエラーも出ないよ、というのが今回言いたかったこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
こう書けば、つまり、こうなると。
