45

Chrome で背景が壊れることがあります。他のブラウザではこのエラーは発生しません。

これは、body の背景色を担当する単純な CSS 行です。

body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}

これはまさに私がこの問題を解決する方法です。Gmail のメールに含まれているリンクをクリックすると、何か問題が発生します (背景なし)。次に、ページを更新すると、背景が完全に色付けされます。

この問題を解決するにはどうすればよいですか?

4

22 に答える 22

49

聞いたことがない。試す：

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}
于 2009-01-08T20:19:31.757 に答える
9

わかりました、私は解決策を見つけました. それは素晴らしいことではありませんが、副作用なしでトリックを行います.

HTML:

<span id="chromeFix"></span>

(これをbodyタグの下に置きます)

CSS:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }

問題を解決するためにこれが行うこと:

これにより、ページのコンテンツが 100% ではない場合でも、Chrome はそれを 100% と見なすようになります。これにより、本文がコンテンツのサイズに「現れる」ことがなくなり、バックグラウンドの欠落のバグが解決されます。これは基本的height: 100%に、本文または html に適用された場合の動作ですが、これらの要素の高さが 100% の場合のように、スクロール時に (ページの高さが 100% を超えると) 背景が切り取られるという副作用はありません。

私は今眠ることができます=]

于 2009-01-20T00:05:09.390 に答える
6

いくつかのサイトで同じ問題が発生し、背景のスタイル設定を body から html に移動することで修正しました (これは、既に述べたbody {}tohtml, body{}テクニックのバリエーションだと思いますが、html でのみスタイルを処理できることを示しています)。例えば

body {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;

}

になる

html {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
}
body {
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;
}

これは、IE6-8、Chrome 4-5、Safari 4、Opera 10、および Firefox 3.x で機能し、明らかな厄介な副作用はありませんでした。

于 2010-05-03T12:32:45.197 に答える
5

HTML と本文の高さ 100% は、古い IE バージョンでは機能しません。

body 要素から html 要素に backgroundproperties を移動する必要があります。
これでクロスブラウザが修正されます。

于 2009-04-17T20:58:00.797 に答える
5

私はこれを修正することができました：

html { height: 100%; }
于 2009-01-16T14:01:15.780 に答える
2

ここで他のすべての解決策を試しても成功しなかったので、懐疑的にこの記事にある解決策を試してみたところ、うまくいきました。

基本的には@charset "utf-8";、CSS から削除することになります。

これは DreamWeaver での不適切な実装のように思えますが、問題は解決しました。

于 2010-09-07T01:40:18.833 に答える
2

シンプルで正しい解決策 - 本文ではなく、html で背景画像と色を定義します。本文で特定の高さ (パーセンテージではなく) を定義していない限り、その高さは、すべてのコンテンツを保持するために必要な高さと見なされます。したがって、背景のスタイリングは、本文だけでなく、html ドキュメント全体である html に含める必要があります。シンプル。

于 2010-08-04T09:54:14.023 に答える
1

100% はわかりませんが、セレクターを「html, body」に置き換えてみてください。

html, body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
于 2009-01-08T20:16:08.953 に答える
1

Chrome と Safari 別名 Webkit ブラウザーの両方で同じことがありました。私はそれがバグではなく、バックグラウンドを「壊す」CSSの誤った使用ではないかと疑っています.

上記の質問では、 body background プロパティが次のように設定されています。

background: black;

これは問題ありませんが、完全に正しいわけではありません。画像の背景がないので...

background-color: black;
于 2010-08-26T07:48:32.647 に答える
1

ローガンと1mdmが提案したことを試してみて、CSSを微調整しましたが、白髪が成長する前に、バグが修正された新しいChromeバージョンが登場するのを本当に待ちます.

私見ですが、現在の Chrome のバージョンはまだアルファ版であり、開発中に拡散できるようにリリースされたものです。私は個人的にテーブルの幅に問題がありました。コードはすべてのブラウザで正常に動作しましたが、Chrome では動作しませんでした。

于 2009-01-10T09:31:30.747 に答える
1

Adam のchromeFixソリューションと Paul Alexander の純粋な CSSの変更により、 Chromeでは問題が解決されましたが、 Safariでは解決されませんでした。いくつかの追加の調整により、Safari の問題も解決しました: width: 100%and z-index:-1(または、この要素をページ上の他のすべての要素の背後に配置する他の適切な負の値)。

CSS:

body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
于 2010-06-24T15:45:51.357 に答える
0

これはChromeのバグだと確信しています。ほとんどの場合、ブラウザのサイズを全画面に変更してからタブを切り替えると発生します。また、タブを切り替えたり、新しいタブを開いたりするだけの場合もあります。しかし、「修正」を見つけたと聞いてうれしいです。

于 2010-08-04T13:17:59.293 に答える
0

それでも問題が解決しない場合は、上記のchromeFixで「top」を「bottom」に切り替えてみてください。また、スパンではなくdivを切り替えてみてください。

<div id="chromeFix"></div>

スタイル：

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
于 2009-03-04T04:23:40.040 に答える
0

ウェブデザインにDreamweaverを使用してCSSスタイルを作成すると、Dreamweaverは次のようなデフォルトのコードを追加します。

@charset “utf-8″;

これをスタイルシートから削除してみてください。背景画像または色が正しく表示されます。

ソース

于 2009-11-02T18:07:35.493 に答える
0 
body, html { 
   width: 100%;
   height: 100%;
}

私のために働いた:)

于 2010-04-07T11:30:43.590 に答える
0

あなたのコードは問題ないと誰もが言っており、他のブラウザーでも問題なく動作することがわかっています。だから、科学を捨てて、ただ何かを試す時が来ました:)

/as-well-CSS の代わりに body タグ自体に背景色を入れてみてください。Javascriptで（冗長に）もう一度主張するかもしれません。ある時点で、Chrome は毎回必要に応じて背景を配置する必要があります。タイミング解釈の問題かもしれません...

[もちろん、このいずれかが機能する場合は、サーバー側で切り替えて、おかしなコードが Chrome にのみ表示されるようにすることができます。そして数か月後、Chrome が変更され、問題が解消されたときに...まあ、後で心配してください。]

于 2009-01-10T12:10:13.217 に答える
0

使用したカスケーディング スタイル シート:

body {background-color: #FAF0E6; font-family: arial, sans-serif }

Internet Explorer では動作しましたが、Firefox と Chrome では失敗しました。私はそれを次のように変更しました：

body {background: #FAF0E6; font-family: arial, sans-serif }

（つまり、私は削除しまし-colorた。）

3 つのブラウザすべてで動作します。（Chromeを再起動する必要がありました。）

于 2009-09-22T15:03:30.407 に答える
0

Chrome でもこの問題が見られます。正しく覚えていれば、ウィンドウを最小化してから最大化すると修正されますか?

Chrome がリリースされて以来、実際にはあまり使用していませんが、これは間違いなく Google のせいです。私がチェックしていたコードは気密性が高かったからです。

于 2009-01-08T20:18:42.490 に答える
0

これが私が問題を解決した方法です：

これは実際の問題で、明らかに CSS で定義された body タグが取り上げられていませんでした。

Chrome/Safari で body タグが機能しない

私の環境：Chromeブラウザ/Safari、

初めて機能しないので、ここのスレッドの推奨事項に従って、htmlエントリを含むcssファイルを追加することになりました

サンプル CSS ファイル: mystyle.css

<style type="”text/css”">
html {
 background-color:#000000;
 background-repeat:repeat-x;
 }

body {
 background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>

サンプルの HTML ファイル:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">

  <title>Test Html File</title>
  <link rel="stylesheet" href="mystyle.css" type="text/css">
</head>

<body>
  <h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>

最初の読み込み後、Chrome で動作し、CSS ファイルに戻って html エントリにコメントを付けると、変更された CSS は次のようになります。

<style type="”text/css”">
// html {
//    background-color:#000000;
//    background-image:url('bg.png');
//    background-repeat:repeat-x;
// }

body {
    background-color: #DCDBD9;
    color: #2C2C2C;
    font: normal 100% Cambria, Georgia, serif;
    }

  </style>

明らかに webkit のバグのようですが、Safari でも同じ動作が見られました。HTML 情報を共有していただきありがとうございます。body タグが機能しない理由をずっと探していました。

最終的な出力は次のようになります。

htmlタグ修正後

于 2012-07-04T21:52:26.877 に答える