2011-08-23 2 views
3

J'ai conçu un simple site d'entreprise, et j'ai passé plus de temps à essayer de déboguer ce problème de rendu que d'avoir du matériel pour fonctionner correctement en PHP!iFrame montrant une ligne grise dans un safari mobile seulement

J'ai un iframe. Sur tous les autres navigateurs (même Safari sur le bureau), le rendu est correct, mais sur Safari mobile, il y a une fine ligne grise sur la bordure de l'iFrame - mais seulement à certains niveaux de zoom. J'ai lu d'autres articles similaires qui avaient à voir avec 2 divs entrant en contact les uns avec les autres, mais iFrame n'est pas enfermé dans un div.

CSS pertinente:

iframe.noBorder { 
    border: none; 
    border:0; 
} 

code embed iFrame actuel:

<iframe class="noBorder1" src="header.html" width=980 height="160" frameborder="0" border="0" scrolling="no" ></iframe> 

Comme je l'ai dit, ce n'est pas dans un div ou quoi que ce soit. Vous pouvez voir le problème here ou consultez le image here.

Répondre

1

J'ai essayé ceci sur quelques navigateurs de PC sans problème - ainsi je suppose que vous avez trouvé un pépin mobile.

Pourriez-vous définir le border-color attribute of the iframe à la même couleur gris-vert que l'élément contenant - ou à transparent et voir si cela le fixe?

+0

Merci pour votre réponse rapide. Oui, cela n'affecte que le safari mobile sur iPhone et iPad. Il fonctionne correctement sur tous les navigateurs de bureau (y compris Safari, IE, Chrome et Firefox) correctement. Si je place la couleur de la bordure à la bg alors je voudrais avoir une ligne vert clair sur la droite, parce que c'est une couleur différente de la bg. –

+0

@Vinod pourriez-vous essayer de définir l'arrière-plan et la bordure-couleur à «transparent»? – amelvin

+0

J'ai trouvé un hack pour ça - pas vraiment fier de ça. J'ai simplement pris un div et fait ce div la couleur bg. Je devais le faire environ 5 pixels ou plus - pour une raison quelconque avec un div 1 px, il apparaissait toujours. C'est résolu - mais c'est une façon vraiment, vraiment stupide de le réparer - je ne peux pas penser à autre chose. J'ai essayé de changer la frontière pour "transparent" mais cela n'a pas aidé non plus. –

1

overflow: hidden; résout le problème!

Questions connexes