Вопросы Теги

CSS, позиционный фоном не работа в Мобильном Safari (iPhone/iPad)

У меня есть проблема с позиционным фоном в мобильном сафари. Это хорошо работает на других настольных браузерах, но не на 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" смещаются слишком далеко налево. Я погуглил вокруг, и насколько я могу сказать, позиционный фоном поддерживается в мобильном сафари. Я также попробовал каждую комбинацию ключевых слов ("вершина", "центр", и т.д.), пкс и %. Какие-либо мысли?

Спасибо!

Обновление: вот разметка в .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), чтобы занять место на любом размерном браузере.

P.S. Я знаю, что существует, вероятно, несколько более эффективных ярлыков CSS, которые я мог использовать, но на данный момент мне нравится организовывать код как, у меня есть он для видимости.

17
задан Nick 6 July 2010 в 21:55
поделиться