システム開発ブログ

5ブラウザで共通（INPUT ボタン）

橋本

橋本 (2010年10月18日 10:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部

パッケージものとしてシステムを開発する際には、全ブラウザ対象というものも増えてきました。システム画面のデザインもどのブラウザでもある程度共通に見えるように注意しなければいけません。ある程度というのは、それぞれブラウザのCSSの解釈やシステムフォントの違いがあるため、完全に揃えるというのは、難しく手間もそれなりに増えてしまいます。

ブラウザによる見え方の違いは「Safari・Chrome」「Firefox・Opera」「IE 6・7・8」の３つのグループに分かれるようです。
特にIEは、独自のCSSの解釈とバージョンによってもまた違うので注意が必要です。

最近私が作成した中で、困った事、対応した事を少しずつ書いていきたいと思います。

まずは、INPUT ボタンです。
同じHTMLソースを表示してキャプチャーを撮ったものを並べています。
（上段：IE7　下段：Firefox for Mac）

●IEでボタンの中のフォントサイズが変わらない。

「font-size:10px」だけを指定しても変化はありません。
フォントファミリーを指定しても同様です。
インラインで「MS Pゴシック」だけを指定して、有効になりました。
※クラスで読込みは無効です。

特に問題はありません。

-------------------------------------------------------------------------------------

※クラスではなく*{}で「MS Pゴシック」を指定すれば、インラインではなくても有効になります。

特に問題はありません。

-------------------------------------------------------------------------------------

●IEでボタンの背景画像が変わらない。

「border:none」だけでなく「border-width:0px」を
入れないと変わりません。

特に問題はありません。

-------------------------------------------------------------------------------------

IE以外のSafari, Chrome, Firefox, Opera は特に問題無く表示されました。
業務上、OSやシステムの都合で古いIEを使わざるを得ない事もありますが、早く全ブラウザ共通の仕様になってもらいたいものです。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ