プライベート Web ページのメイン コンテンツが Firefox 内で奇妙に表示されません。ヘッダー バーとフッター バーの両方が表示され、メイン テキストは右側に隣接して配置されます。場合によっては、フッターも本文の上に移動します。これは、何らかの形で欠落しているDIVの配置に関するすべての問題であると思います。【解決しました】
Chrome で表示したときに同じ高さの 2 つの DIV の高さも異なります。この問題は Safari でも発生しますが、別の方法で発生します。ロゴとナビゲーション バーの間には 1 ピクセルの隙間があり、Chrome または Firefox で表示した場合には表示されません。今後同様のことが起こらないように、すべてのブラウザのデフォルトをリセットする方法を誰か考えられますか?
ウェブサイトは現在まだオンラインになっておらず、最終リリースに向けてデバッグ中です。(Webkit ブラウザを使用していない人をイライラさせるので、現状ではこれをリリースしたくありません。)
また、補足として、Internet Explorer 9 で発生する CSS エラーを修正する方法を知っている人はいますか? ナビゲーション バーのグラデーションがなくなり、一部の領域の背景色がなくなり、すべての画像リンクが迷惑なボックスで囲まれています。
編集: オンラインの CSS グラデーション ジェネレーターで、グラデーションを IE9 で機能させるために必要なことを見てきました。バックグラウンドの問題は、明らかに同じソースに由来します。
また、Opera でhttp://jsbin.com/ipixay/1にある最新のデバッグ バージョンで問題が発生している人はいますか? （これに対する功績は Sunyatasattva に帰属します。）
フィドル (コードが掲載されている場所) へのリンクは次のとおりです: http://jsfiddle.net/aaQSD/7/ 9つの問題。
私の推測では、Firefox の問題は CSS の次のセクションのどこかにあると思われます。
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
修正されたもののリストは次のとおりです。
- 画像の不要なボックス/境界線
- Firefox の表示の問題
- グリッチフッター
編集:私は現在、コメントで提案されているように、問題を再現するために最小限のコードをいじる作業を行っています。私の愚かな間違いを許していただければ幸いです。ありがとう、これまでに回答してくれたみんな！
編集 2: フィドルが出ました! 下にあったコードのパンドラの箱を削除しました。