PNG img s'affiche dans Visual Studio Designer mais pas dans IE

J'écris actuellement une page Web. Je veux qu'il y ait une image de bannière sur le dessus de la page Web. Voici mon html et css:PNG img s'affiche dans Visual Studio Designer mais pas dans IE

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Protect The Environment!</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div> 
     <img src="http://intranet.kings.edu.hk/~s13977/banner.png" 
      id="banner-image" 
      alt=""/> 

    </div> 
</body> 
</html>

styles.css

body { 
    background:#f8e4e4; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size:medium; 
} 

#banner-image { 
    height: 106px; 
    width: 582px; 
}

Comme vous pouvez le voir, je a fait mis l'image dans le code html et le src est régler à l'URL correcte. Vous pouvez copier l'URL et vérifier. Voici à quoi il ressemble du designer Visual Studio:

Mais quand je le lance avec IE, il ressemble à ceci:

J'ai essayé d'ajouter à la règle #banner-image css:

visibility:visible;

Mais cela ne fonctionne pas du tout. La page reste la même!

Je pense qu'il y a quelques problèmes avec le div mais je veux vraiment le garder. Cela rend les choses beaucoup plus faciles à gérer.

Source

2015-08-03 Sweeper

Avez-vous essayé de l'utiliser dans d'autres navigateurs? Si oui, quel est le résultat? – lxcky

Il se peut que IE n'apprécie pas les caractères de nouvelle ligne dans la balise 'img'. – Boaz

Si vous voulez être sérieux au sujet du développement de pages Web, vous devez apprendre à utiliser les outils de développement dans votre navigateur. Une fois que vous faites, vous n'aurez pas à poser de telles questions (ou au moins poserait de bien meilleures questions) – Amit

Lors de mes tests, je n'ai pas trouvé de différence dans la commande HTML, bien que je n'étais pas extrêmement approfondie. L'ajout d'une classe flottante directement à l'image ou dans un environnement <div> ne fait aucune différence, les images n'apparaissent toujours pas.
Heureusement, le correctif est assez simple! Ajoutez juste trois lignes à votre CSS. fichier et le problème est résolu.

Pas de hacks, pas de conditions, juste pure, validation CSS.

img 
{ 
    position: relative; 
}

Pour autant de maux de tête que j'ai eu de traiter avec les insuffisances d'Internet Explorer, il était une gifle sur le visage quand je réalisé à quel point simple, la solution est. Relatif positionnement est le correctif magique dans IE, alors essayez-le si vous avez une étrange bizarrerie qui vous cause du chagrin!

Note: Testée et workied fin

Source

2015-08-03 06:37:12

Oh oui! J'ai vraiment aimé IE avant. Mais maintenant? Pas autant. – Sweeper

Oui c'est le tour de magie dans IE, mais ce qui se passe, si votre position doit être réparée? ou ne peut pas être relatif en raison d'exigences? c'est un pansement sur une plaie d'entaille ici. –

@BarrJ merci pour des conseils supplémentaires. Mais 'position: relative 'ne fera aucun mal à voir. –

Internet Explorer ne reconnaît pas le caractère de nouvelle ligne, parce que IE ne fait pas l'encodage automatisé. Ce qui signifie qu'au lieu de:

"http://intranet.kings.edu.hk/~s13977/banner.png"

Dans votre chemin d'image sur Internet Explorer, vous obtiendrez:

"http://intranet.kings.edu.hk/%7Es13977/banner.png"

% 7E est l'encodage url de ~, ce qui conduira à un chemin inexistant de l'image .

Vous devez utiliser encoderUriComponent, ou un autre composant d'encodage explicite pour votre lien afin de le faire fonctionner sur IE.

Source

2015-08-03 06:39:59

PNG img s'affiche dans Visual Studio Designer mais pas dans IE

Répondre

Questions connexes