CSS/HTML iPhone pune un spațiu suplimentar în jurul marginilor poziției imaginii de fundal. cum îl pot elimina?

rezumat

Am creat o cutie cu CSS și HTML. Se scalã pe orizontalã ºi pe verticalã, menþine un fundal de gradient frumos ºi colturi rotunjite. Utilizează doar o singură imagine de fundal PNG (cu mai multe sprite). Funcționează în IE7 +

Nu folosesc CSS3, pentru că în colțuri și granițe există subtilități care fac aproape imposibilă reproducerea cu CSS3 singur. De asemenea, trebuie să lucreze în IE7 și 8.

I've had success making it work in all browsers that it needs to, but Problema is the iphone


Demo

A working example here: http://www.trevorsimonton.com/iosbg/index.html

În partea de jos a acelei pagini, am link-uri către ieșire în diverse dispozitive și browsere. De asemenea, funcționează excelent pe HTC Evo, dar nu am capacitatea de a posta o captură de ecran de pe acel dispozitiv.


Problema

Din anumite motive, pare să existe un fel de umplutură sau margine sau graniță sau ceva în jurul imaginii de fundal a fiecărui div . Am postat capturi de ecran de la site-ul de mai sus, și câteva în partea de jos a acestui post.

  • Acesta apare numai pe iPhone.
  • Funcționează excelent pe cele mai recente versiuni ale Chrome, Safari și Firefox. De asemenea, funcționează excelent în IE7, IE8 și IE9
  • Zoom-ul utilizatorului este dezactivat și scara este blocată la 1.0

Codul

Caseta are un marcaj complex pentru a permite scalarea și afișarea imaginilor în IE7 +

Marcajul este astfel:

HTML

<div class='ksrfasw'>
  <div class='content-container'>

    <!-- top and top-right corner -->
    <div class='ksrfasw-top'><div> </div></div> 

    <!-- right shadow, stretches down right side -->
    <div class='ksrfasw-rs'>

    <!-- left shadow, stretches down left side -->
    <div class='ksrfasw-ls'>

       <!-- inner gradient -->
       <div class="ksrfasw-tab-content">

          <!-- inner padding -->
          <div class="ksrfasw-tab-content-inner">
             CONTENT -- FINALLY!
          </div>
       </div>
    </div>
    </div>

    <!-- bottom and bottom-right corner -->
    <div class='ksrfasw-bottom'><div> </div></div> 

  </div>
</div>
  • Imaginea de fundal a fiecărei chei div este aceeași. "box.png" - asta conține toate diferitele "sprite" pentru diferitele părți ale puzzle.
  • Există, de asemenea, o "breșă" în interiorul cutiei pentru a face min-înălțime de lucru în IE7.
  • Da, acest marcaj pare excesiv ... dar funcționează așa cum era de așteptat în toate browsere. Este un colț complet, scalabil, rotunjit, gradient caseta x-browser.

CSS:

.ksrfasw-top,
.ksrfasw-top div,
.ksrfasw-ls,
.ksrfasw-rs,
.ksrfasw-bottom,
.ksrfasw-bottom div,
.ksrfasw-tab
{
background-image:url("box.png");
background-repeat:no-repeat;
padding:0px;
margin:0px;
border:0px;
outline:0px;
width:100%;
background-size:725px 1120px;
}
.ksrfasw-top div
{
background-position:0px -40px;
}
.ksrfasw-top
{
background-position:100% -60px;
padding-right:12px;
}
.ksrfasw-rs
{
background-position:100% -600px;
padding-right:12px;
}
.ksrfasw-ls
{
background-position:0 -100px;
}
.ksrfasw-bottom div
{
background-position:0px -20px;
}
.ksrfasw-bottom
{
background-position:100% 0px;
padding-right:12px;
}
.ksrfasw-brace
{
height:190px;
float:right;
width:1px;
}

.ksrfasw,
.ksrfasw-content-container
{
position:relative;
}
.ksrfasw-tabbed
{
padding-top:34px;
}
.ksrfasw-content-container
{
z-index:5;
}
.ksrfasw-tab
{
position:absolute;
width:154px;
display:block;
text-decoration:none;
height:61px;
top:0px;
}
.ksrfasw-tab-location
{
left:1px;
}
.ksrfasw-tab-name
{
left:151px;
}
.ksrfasw-tab-active
{
z-index:10;
background-position:-515px -700px;
}
.ksrfasw-tab-active-first .ksrfasw-tab-active
{
background-position:-515px -780px;
}
.ksrfasw-tab-active-first .ksrfasw-top div
{
background-position:5px -40px;
}
.ksrfasw-tab-inactive
{
z-index:1;
background-position:-515px -620px;
}
.ksrfasw-tab-content-inner
{
padding:20px 25px;
}










body
{
text-align:center;
}
#wrapper
{
width:95%;
max-width:700px;
min-width:300px;
margin:0 auto;
}
/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}
.clearfix:after {
  font-size: 0;
}

(Notă: în CSS și HTML se întâmplă și alte lucruri pentru a crea tab-uri peste cutie ... nu vă faceți griji despre asta. în exemplul de față am o casetă cu file și una fără. ambele manifestă același comportament)


iPhone Imagini care arată problema

Here is one: shows offset created on iphone between elements

and a zoomed version of the mysterious "padding" another shot of the mysterious padding, with a zoomed detail


Ecranul iPad care arată așteptările

here's a rendering by ipad, working as expected: enter image description here

Am încercat tot ce pot cu background-position , position , top , left , padding , border și chiar background-size proprietăți. ) aceste linii pur si simplu nu vor disparea pe iPhone.

Există ceva despre iphone că spațiile de imagini de fundal pe care le pot preveni?

mulțumesc, anunțați-mă dacă sunt necesare mai multe exemple sau explicații ale exemplului conectat.

0
Imaginea este curată, funcționează excelent în orice, cu excepția iPhone-ului
adăugat autor tmsimont, sursa
este încărcat aici: trevorsimonton.com/iosbg/index.html
adăugat autor tmsimont, sursa
încercați să verificați o singură dată imaginea. măriți-l la scară mare similar în Photoshop și inspectați zona de frontieră. Mă duc în astfel de probleme de zeci de ori, pentru că există o prostie pe care o face Photoshopul în timp ce taie astfel de imagini
adăugat autor kishu27, sursa
Îl poți încărca undeva? Aș putea să greșesc, dar nu mă pot gândi la nimic altceva, pentru că am fost deja în această chestiune de mai multe ori
adăugat autor kishu27, sursa

1 răspunsuri

imaginea lui. dacă măriți orice browser, veți vedea aceleași linii ca pe iPhone.

Cred că vine de la ecranul retinei, dublând toți pixelii.

puteți face o imagine adecvată la dublă dimensiune și setați-o cu o interogare media cum ar fi

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ksrfasw-top,.ksrfasw-top div,.ksrfasw-ls,.ksrfasw-rs,
  .ksrfasw-bottom,.ksrfasw-bottom,div,.ksrfasw-tab{
    background-image:url("box-doublesize.png");
}

acest lucru ar trebui să vă remedieze problema.

0
adăugat
aproape ... din nefericire, dublarea casetei.png face saltul de la 8kb la peste 40, și există și o limită a megapixelilor imaginilor bg pe iOS safari ( bit.ly/eIJQl9 ), așa că nu pot dubla imaginea și să o reiau pentru că o aruncă peste limită ... Cred că ai dreptate, așa că "Voi vedea ce pot face înainte de a mă desprinde și de a face acest lucru cu mai multe imagini bg (aș prefera nu, cu toate acestea, ca acest lucru va provoca blițuri ciudat la încărcare, fără un fel de preloader)
adăugat autor tmsimont, sursa
a trebuit să-l împărțesc în două imagini ... a făcut treaba asta .. a existat, de asemenea, o problemă cu înălțimea liniei și de preaplin. multumesc pentru ajutor
adăugat autor tmsimont, sursa