IE7 :en-tête au-dessus du menu

StackOverflow https://stackoverflow.com/questions/13851

  •  08-06-2019
  •  | 
  •  

Question

J'ai des problèmes avec IE7.J'ai un en-tête, qui est un IMG.En dessous, j'ai un div qui représente un menu, ils doivent être attachés les uns aux autres sans espace entre les deux.Les deux ont une largeur de 1 000 px.Dans Opera et FireFox, l'en-tête et le menu sont parfaitement attachés l'un à l'autre.Cependant, dans IE7, il y a un petit espace entre le menu DIV et l'IMG.J'ai essayé de définir explicitement le remplissage et la marge sur l'IMG, mais cela ne fonctionne pas.J'ai déjà eu ce problème, cela semble donc être une bizarrerie d'IE7.

Mon code HTML :

<div id="middle">
  <img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />

  <div id="ctl00_menuPanel" class="menu">
    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
    <a id="ctl00_leden" href="Leden.aspx">Leden</a> |
    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
  </div>
</div>

Était-ce utile?

La solution

Essayez la barre d'outils du développeur IE, qui vous permettra d'inspecter ce qui se passe avec les éléments et vous donnera un aperçu des domaines couverts.Cela pourrait vous permettre de mieux comprendre le problème.

Autres conseils

La solution: 

img {
padding: 0px;
margin: 0px;
display: block;
}

afficher:bloc

Je rencontre souvent cela.Plutôt que de rechercher le comportement spécifique, essayez de vérifier l'intégrité en définissant explicitement les propriétés de remplissage et de marge des sélecteurs img/div/etc sur 0, définissez border-style :aucune largeur de bordure :0px frontière="0" etc.

La barre d'outils de développement IE est un incontournable, mais il est peu probable qu'elle vous aide à résoudre les problèmes liés à un seul pixel.

Au lieu de recourir au bloc d'affichage, notez qu'IE7 fait des choses très étranges avec les espaces ;essayez de supprimer l'espace entre l'image et le div et voyez ce qui se passe.

Réinitialisations CSS (comme le YUI Réinitialiser le CSS) sont parfaits pour ce genre de chose.Ils réinitialisent les remplissages, les marges et autres propriétés d'affichage sur de nombreux éléments HTML afin de minimiser les différences d'affichage.

La solution...afficher :bloc

On ne pouvait pas répondre correctement à cette question sans connaître le mode de rendu dans lequel se trouvait le navigateur ;vous devez indiquer aux gens quel type de document vous avez si vous rencontrez des problèmes de rendu CSS.Le comportement de l'image auquel vous faites référence est différent en mode bizarreries et en mode standards.Un scénario de test minimal doit inclure un document HTML complet et le CSS pour reproduire le problème.S'il vous plaît, ne demandez pas d'aide aux gens sans leur donner les informations dont ils ont besoin pour répondre facilement sans perdre leur temps...

La vraie solution :

#middle { font-size: 0; line-height: 0; }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top