ひさーしぶりにhtmlとCSSを仕事でいじくり倒してます。
かなり前に作られた社内の某WEBアプリのシステムが
IE以外で見るとまあ悲惨なことになって、じきにスマホやらを
使うことになってゆくのにこれではまずいということになりまして、
別に僕の担当でもなんでもなかったんですが何とかせいということになりw。
まあ何とかしますよ(゚Д゚)。
htmlとCSSを美しく書くのはもはやシュミであると言っても
過言ではないんですが、人が書いたやつを書きなおすのは
ただでさえ難儀な場合が多くて、さらに今回のはまあひどい。
.NETで作られたWEBアプリなんですが、まだ僕は.NETでWEBアプリを
書いたことがないのでこいつで書くとこんな風になってしまう
もんなんでしょうか。
全てのブロック要素がposition:absoluteで配置されているので
MS Pゴシック以外のフォントで見るとぐちゃぐちゃに
あちこちのブロック要素が重なりあったり消えたりw。
画面に表示したくないボタンとかはwidth:0 height:0で配置されて
いるのでIE以外で見ると表示されちゃったりw、
CSSは外部ファイルに書かれてたりタグに直接書かれてたり
もうあとは忘れたw。
とりあえず、全てのposition:absoluteで書かれたCSSを削除して
floatとか使って再配置。あとはwidth:0 height:0で消していた
ものはvisibility:hiddenで隠すようにしたり、テーブルの
各セルの幅をきちんと指定したり、あと何したっけ。
いちいち一つ一つのtdにclassとか設定すんなっつーの。
あるidのブロック要素の中に一つしかテーブルが入らないなら
#hogehoge tdとかで一括指定すりゃいいじゃん。
結果、とりあえず1ページ分きちんと表示されるように直せました。
本当はもっと根本的に最適化したいけど、さすがに時間が…。
なんかあと十数ページあるらしいし(*_*)。
滅多に仕事内容の愚痴なんか書かないんですが、
本当にひどいと思ったもんでw。