※ ChatGPTを利用し、要約された質問です（原文：https://でのレイアウト崩れをさける方法）
httpsでのレイアウト崩れを防ぐ方法
このQ&Aのポイント
httpsでのレイアウト崩れを防ぐ方法について教えてください。
httpsで表示すると画面の幅が異なり、レイアウトが崩れてしまいます。Firefoxで問題が発生しているようですが、解決方法はありますか？
XREAのレンタルサーバを利用しており、httpsは共用サーバを使用しています。htmlの引用を添付します。httpsで画像やスタイルを指定する場合も共用サーバを経由しています。
htmlを作成したものをhttp://で表示する時と、https://で表示する時とで
画面の幅がことなってしまいます。このためhttps://の時にレイアウトが
崩れてしまいます。
試したところFirefox3.5.5では起き、IE7では起きないようです。
Firefoxでこの問題を避ける方法はないでしょうか。
レンタルサーバは XREA で、httpsは共用サーバを利用しています。
以下にhtmlを引用します。https://の時には
imgやstyleで指定する画像も共用サーバを経由しました。
--(http://のときのhtml------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="noindex" />
<meta name="description" content="デスクリプション" />
<meta name="keywords" content="キーワード" />
<title>タイトル</title>
<link rel="stylesheet" type="text/css" media="all" href="http://test.com/style.css" />
</head>
<body style="background-image:url('http://test.com/images/body_back.jpg');">
<div id="body-box" class="block-center">
<font color='red'><b>(TEST環境)</b></font> 携帯サイト
<div id="header-box" style="background-image:url('http://test.com/images/topbar.png');">
</div>
<div id="menu-box">
<div id="menu-box-bg">
<div class="menu-top"><a href="http://test.com/">トップ</a></div>
</div>
</div>
<div id="contents-box" style="float:right;width:546px;border-top:1px solid #553333;border-left:1px solid #553333;background-color:#fffefe;"><div style="margin:10px;padding:100px 100px;border:1px solid #888888;">
ああああああああああああああああああああ
</div></div>
<div id="footer" style="clear:both;border-top:1px solid #37001e;">
フッター
</div>
</div>
<div id="footer-link" align="center" >
携帯サイト
</div></body>
</html>
--------------------------------------------------------------------
お礼
その後、自己解決しました。 Firefox3.0.8では発生せず、では銀行などのhttpsになっている画面を Forefox3.5.5とIEで較べても問題なし。 そこで、SSL化の仕方に問題があるかと考えて、 XREAの共用SSLサーバをss1.xrea.comに変更したら問題が消えました。 なんで起きていたのか仕組み上の説明はついてませんが、 この質問を閉じさせていただきます。 お手数掛けました。どうも、ありがとうございます。
補足
コメントありがとうございます。 float:left;はstyle sheetに記入しています。 contents-boxを先に書くと、 contents-boxが上になり、menu-boxが下になります。 更に調べてみました。 上の画像でも判るとおり、httpsのほうでは画面の幅が狭くなって います。これはFirefox以外では起きていません。 どうも幅を狭くするのにpixel数が再計算されていて、その際に おそらく全体の幅よりmenu-box＋contents-boxが 1pixel大きくなってしまったようです。 下のより簡単なhtmlでもhttpsでアクセスすると、 Firefoxのみ幅が狭くなってしまいます。 -------(ここから)--------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" > <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Content-Language" content="ja" /> <title>タイトル</title> </head> <body> <div style="margin:0px auto 0px auto;background-color:#880000;width:800px;height:100px;"> </div> </body> </html> -------(ここまで)---------------------------------------------------