17

モバイルサファリのバックグラウンド位置に問題があります。他のデスクトップブラウザでは正常に動作しますが、iPhoneやiPadでは動作しません。

body {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
 padding: 0px;
 margin: 0px;
 font-family: "Arial";
}

#header {
 width: 1030px;
 height: 215px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 85px;
 background-image: url('images/header.png');
}

#main-content {
 width: 1000px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 15px;
 padding-bottom: 15px;
 background-image: url('images/content_bg.png');
 background-repeat: repeat-y;
}

#footer {
 width: 100%;
 height: 343px;
 background-image: url('images/background_bottom.png');
 background-position: center;
 background-repeat: no-repeat;
}

「background_top.png」と「background_bottom.png」の両方が左にずれすぎています。私はグーグルで検索しましたが、私が知る限り、バックグラウンドポジションはモバイルサファリでサポートされています。また、キーワード（ "top"、 "center"など）、px、および％のすべての組み合わせを試しました。何かご意見は？

ありがとう！

更新：これが.htmlファイルのマークアップです。他のブラウザーでデザインとレイアウトが適切に表示されます:(上記のcssも更新しました）

<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="header"></div>
  <div id="main-content"></div>
  <div id="footer"></div>
 </body>
</html>

両方の背景画像は非常に幅が広​​く（〜2000px）、任意のサイズのブラウザでスペースを占有します。

PS使用できるCSSショートカットがおそらくいくつかあることは知っていますが、今のところ、コードを表示できるように整理するのが好きです。

4

5 に答える 5

9

iPhone / Webkitブラウザーは、bodyタグに配置されている場合、背景画像を中央揃えにすることはできません。これを回避する唯一の方法は、bodyタグから背景画像を削除し、ラッパーとして追加のDIVを使用することです。

#wrapper {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
}


<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
 </body>
</html>
于 2011-02-27T17:28:57.703 に答える
5

それはで動作します

background-position-x: 50%;
background-position-y: 0%;

それでも追加する

background-position: center top;

他のブラウザのために。

于 2013-08-22T11:03:30.367 に答える
4

どうやら、iPhone / iPad で「スクロール」するとき、デスクトップ ブラウザーで行うのと同じ方法でページをスクロールしているとは限りません。あなたがしていることは、ビューポート内でページ全体を移動するようなものです。(ここで間違った用語を使用している場合は、誰かが私を修正してくれると確信しています。)

つまり、background-position: fixed は引き続き「サポート」されますが、実際の効果はありません。これは、ページ内でページ コンテンツがスクロールするのではなく、ページ全体がビューポート内で移動するためです。

于 2010-12-06T16:35:50.163 に答える
0

私はこの問題を抱えており、ここで説明されているように、別のスタイルを使用して固定フッターを取り除くことで対処しています: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

于 2011-01-19T19:19:01.570 に答える