2010-03-03 6 views
2

http://blog.helpcurenow.org/test/mockups/mar2010/lp.htmlPourquoi IE7 ignore-t-il la marge de gauche de mon premier élément de liste (seulement)?

Dans la page de destination ci-dessus, j'ai une boîte d'offres qui a quatre boutons de don. Les trois premiers sont ciblés avec des identifiants individuels et une marge de gauche de 13px.

Tout va bien dans tous les navigateurs que je consulte sauf IE7. Pour une raison quelconque, ie7 ignore la marge gauche de 13px sur le premier élément de liste, et seulement sur celui-là. La partie étrange est quand j'ouvre les outils de développement de IE (ne pas réellement regarder dans ie7, mais en utilisant IE8 en mode IE7) et sélectionnez l'élément, cela montre que la marge 13px est là, et non barrée. Le navigateur semble juste l'ignorer!

Y a-t-il un quirk ie7 que je devrais savoir ici ou ai-je manqué une déclaration CSS que j'aurais dû ajouter? Des idées??

Merci!

+2

IE7! == IE8compat –

+0

qu'est-ce que cela signifie? –

+0

Je pense que ce qu'il dit, c'est que le vrai Internet Explorer 7 ne se comporte pas exactement comme IE8 fonctionnant en mode compatibilité/IE7, ce qui peut être vrai, mais est complètement hors de propos pour votre question. Votre problème est exposé dans la vue de compatibilité d'IE8. J'ai passé quelques minutes à enquêter, et moi aussi je ne peux pas expliquer pourquoi cela se passe. Je pourrais peut-être proposer une solution, cependant. Etre prêt. –

Répondre

2

Essayez le réglage du rembourrage sur la ul qui abrite les li s à 10px 13px, puis retirez le margin-left des li s.

+0

cool - qui a fonctionné. Merci! –

+0

Content de l'entendre! –

0

Il vous suffit d'effacer les mauvaises bordures, les hauteurs de ligne et les modèles de boîtes et vous êtes en sécurité.

dans la première ligne supérieure de votre CSS, vous ajoutez simplement:

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,img {border:none;padding:0;margin:0; /* etc. like font-size:10px;line-height:10px; */} 

alors vous pouvez définir le « voulu » valeurs de chaque élément après: plus, vous pouvez définir

display:block; 

sur vos éléments alors ils vont utiliser le même modèle de boîte. IE6/IE7 ne comprend pas inline-block qui est par défaut pour certains éléments je crois.

Questions connexes