1

ファンシーボックス 2 プラグインを自分のサイトに追加しました。Chrome と Safari でテストすると正常に動作しますが、Firefox では動作しません。ページは正常に読み込まれますが、サムネイルをクリックして派手なボックスを開くと、body タグのマージン スタイルがキャンセルされ (firebug を使用して判断しました)、レイアウト全体がビューポートの右側に完全に移動します。ファンシーボックスの外をクリックすると、レイアウトは右に押し出されたままになります。誰かが同様の問題を抱えていましたか?それを修正する方法についてのヒントはありますか? 本文のCSSルールとともに、DOCTYPEとヘッドベローを投稿しました。さらに情報が必要な場合はお知らせください。サイトはまだアップしていないので、リンクできません。私はこれに慣れていないので、明らかなことを見逃していたら申し訳ありません。彼らが助けることができると思う人に感謝します!!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'       type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>


body {
    width: 1050px;
    background: #c7c7c7;
    margin: 0 auto;
    overflow: scroll;
}
4

1 に答える 1

4

私は実際に今朝、この同じ問題を抱えていました。私が行った解決策 (おそらくもっと良いオプションがあります) は、本文コンテンツをラップする div を作成し、その幅を設定してから、本文の幅を 100% に設定することです。

<body>

   <div id="container">
       // Page content
   </div>

</body>

CSS:

body { width: 100%; }

#container { width: 1050px; margin: 0 auto; }

Firefox の問題を修正したようで、問題なく IE7 に戻してテストしました。

于 2012-10-24T19:11:16.480 に答える