中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

Ver.1.14:レイアウトの見直し&ブラウザ間の差異を調整

MyHome Portal Ver.1.14を リリースしました。

http://ok2nd.web.fc2.com/download.html

  • textarea内の文字サイズ、種類をページ内全体と同じになるようにCSS(スタイルシート)の見直しをしました。
  • IE6、FirefoxGoogle Chromeの各ブラウザでFORM入力画面がなるべく同じになるようにしました。

    (IE6は文字サイズ中、Firefoxはフォントサイズ14を基準にしています。)

    ネットで情報を集めながら、試行錯誤を繰り返して、とりあえず、下のようにしてみました。

    完璧とは言えませんが、ブラウザの違いをある程度無くせたと思います。

    inputはtype別にCSSを指定する各ブラウザ共通の方法がなく、classで指定するしかないようです。

* {margin: 0px; padding: 0px; }

body {

font-size: 84%;

font-family: "MS Pゴシック",arial,helvetica,clean,sans-serif;

}

textarea,input,select {

font-family: "MS Pゴシック",arial,helvetica,clean,sans-serif;

line-height: 1.2;

*line-height: 1.0;

font-size: 100%;

}

input.text {

margin: 0px;

padding: 1px 0 1px 0;

}

input.password {

margin: 0px;

padding: 1px 0 1px 0;

}

  • CSSの更新時にブラウザにキャッシュが残っているとスタイルが更新されない問題の対策もしました。

    以下のようにすることで、キャッシュを使わなくなります。

      <link rel="stylesheet" href="xxx.css" type="text/css">

        ↓↓↓

      <link rel="stylesheet" href="xxx.css?20081017" type="text/css">

  • ユーザー登録画面でAjaxを使ったアカウント名、ハンドル名チェックのエラーメッセージがFirefoxでは表示されなかった問題を解消。

    document.all.xxxxxxは、IE独自の仕様のため、document.getElementById('xxxxxx')に変更。