Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(※2015/08/15 22:30追記)


んーまだよくは分かっていない。
おさらいとして現象:windows7+firefox40に更新すると<input>要素などの横幅が2倍近くに広がってしまうサイトがある。

私の場合いままで自サイトではcontainerからのフォント指定を継承してメイリオ指定していたのだけど、入力フォントとして扱われずMS UI Gothicが入力用に使われていたのだと思う。
だもんで、単純にサイト製作者側としての対応としてはCSSにて

input{ font-family:MS UI Gothic; }

もしくはtype指定で

input[type=text]{
font-family:MS UI Gothic;
}

とすればwindows7+firefox40での表示は元通りではある。(自サイト+windows7+firefox40で検証済み)
けれどもmac,win10,win8とかは比較検証機材が無いため表示するとどうなるかわからん。
むしろ今までどう表示されていたのかも知りたいところではあるw
もちろん昔からある手入れがあまりされてないようなサイトを表示する場合でもwindows7+firefox40では問題が残り続けるでしょう。
あと社内イントラネットのページもレイアウトが崩れる場合があるので(特に社内だけだと手を抜き易いw)firefoxを許可してる会社でもfirefox40への更新ちょっとまった!状態になるとおもう。

不確実な情報なのであまりよくわからないが原因はなんかメイリオとMS UI Gothicのフォントの横幅の差が酷いらしい。

いくつかあるブラウザの表示差異を埋めるだけでヒーコラ言ってるので、できればOSでの違いまで考慮したサイト作りをさせない方針が示されることを望みます。また何か進展があれば記事を上げます。

(※2015/08/16 21:00ぐらい追記)
fontを決め打ち指定でなくwidth,max-widthをinput要素に指定する方法が提案されています。詳しくは↓で。
Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(ほぼ総括)
http://mayoi-dev.wslab.net/archives/217

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)