https://でのレイアウト崩れをさける方法

解決済

質問者：fire--
質問日時：2009/11/10 00:23
回答数：1件

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-transitio …
<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>
--------------------------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： sakage6
回答日時：2009/11/10 19:16

menu-boxにはfloat:left;が指定されていますか？

現在menu-boxの次にcontents-boxを書かれていますが、menu-boxより前にcontents-boxを書くとどうでしょうか。

この回答への補足

コメントありがとうございます。

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-transitio …
<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>
-------(ここまで)---------------------------------------------------

補足日時：2009/11/10 21:22

通報する

- 0
- 件

通報する

この回答へのお礼

その後、自己解決しました。

Firefox3.0.8では発生せず、では銀行などのhttpsになっている画面を
Forefox3.5.5とIEで較べても問題なし。

そこで、SSL化の仕方に問題があるかと考えて、
XREAの共用SSLサーバをss1.xrea.comに変更したら問題が消えました。

なんで起きていたのか仕組み上の説明はついてませんが、
この質問を閉じさせていただきます。

お手数掛けました。どうも、ありがとうございます。

通報する

お礼日時：2009/11/10 22:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！