IE6 7だと崩れる

質問

添付をみてもらえますか？

IE6 7だと左のパスワードの所がスコシずれます。
あとIE6だと下の部分が崩れます。

誰か原因わかる方いますか？
よろしくお願いいたします。

回答No.5

noname#83877

4の回答は改行のズレでした、質問を勘違いしていたようです。すみません。

見てみた感じ確かにIE系とFirefoxで少し間隔が違いました。
たぶん理由は

・指定が無いのでフォントが違う
・widthの計算される値が違う

のが原因だと思います。

先にwidthの指定ですが、これは統一が無理ではありませんがものすごく複雑なソースになるため多分やらない方が良いと思います。
フォントに関してはプロポーショナルなものを指定してやると良いと思います。(mono-space)

ある程度の妥協案ですが、p#form1とp#form2にtext-align:right;とfont-familyを指定し、それぞれのmargin-leftをmargin-rightにして値を調節してやるとある程度統一されたように見えると思います。

回答No.4

noname#83877

文字サイズを大きくすると複数行になり、その結果ずれるようです。
もしもはみ出てもよいのであれば

p#form1とp#form2に

white-space:nowrap;

を追加すると改行はしなくなります。ですが、文字が大きい場合改行しなくなる変わりに枠からはみ出ると思います。
使い勝手の面から文字を画像にしたりするのは推奨できないので、はみ出る方がいいか、改行するのがいいかの2択になりそうです。

回答No.3

askaaska

> 下の部分
ＩＥ６がないので確認できないのよ。
画像にして添付してくれるとありがたいわ。
そのとき他のブラウザの見え方と
比較できるような画像だと嬉しいわね。

回答No.2

askaaska

確認するのめんどくさかったわ。
ＩＤとパスワードのとこだけ抜き出したものを用意して欲しかったわね。

ＨＴＭＬもスタイルシートも問題ないわ。
ブラウザによってデフォルトのフォントが
違うために発生する現象よ。

こういう狭い場所で異なるブラウザで確実に表示したい場合は
画像にしてしまうのが間違いが起きないわ。
もしくはlabel部分を幅指定するかね。
もちろんフォントが変化しても入る幅にする必要あるわよ。
表組にするのが一番確実ではあるけど。

お礼

ありがとうございます。
下の部分はどうですか？

回答No.1

noname#78439

添付が見当たらないのですが・・・。
まぁ、IEと他ブラウザで表示が異なるのはよくあることで、
IE用と他ブラウザ用で2つのcss用意しといて
ブラウザ判定して切り替えるってのが
いいのではないでしょうか。

補足

http://www.geocities.jp/katokato224/
みてください。