Problèmes de compatibilité avec IE7?

Je travaille sur un site et j'ai des problèmes de compatibilité avec IE7 (ne fonctionne pas) et IE8/Firefox (fonctionne). Quelqu'un peut-il jeter un coup d'oeil aux CSS et Screenshots suivants et me dire pourquoi mon site est cassé dans IE7 et ce que je peux faire pour le réparer?Problèmes de compatibilité avec IE7?

Le site en question est en direct ici: CollectionTree

et moi css pour ce point de vue est

#landingMainContainer 
{ 
    padding-left:10px; 
    margin: 0 auto; 
    text-align: center; 
    min-height: 400px; 
    width: 960px; 
} 
.landingTop 
{ 
    width:100%; 
    min-height:400px; 
    background:url('/Content/Images/BG_gray1_v2.png') no-repeat; 
} 
.landingTopInfo 
{ 
    padding-top:10px; 
    text-align:left; 
    width:50%; 
    padding-left:15px; 
} 
.landingTopInfoText 
{ 
    padding-left:20px; 
    padding-top:20px; 
    float:left; 
    color:#000000; 
    font-size:20px; 
} 
.landingTopInfoTextTitle 
{ 
    font-size:26px; 
    text-align:left; 
    padding-left:40px; 
    padding-top:10px; 
    clear:left; 
    color:#209202; 
} 
.landingTopInfoTextContents 
{ 
    font-size:12px; 
    padding-left:40px; 
    padding-top:10px; 
    clear:left; 
    color:#000000; 
} 
.landingTopInfoSignUpSection 
{ 
    clear:left; 
    float:left; 
    padding-left:40px; 
    padding-top:30px; 
} 
.landingTopInfoSignUpSectionText 
{ 
    padding-left:10px; 
    padding-top:10px; 
    float:left; 
    font-weight:normal; 
} 
.landingTopInfoImage 
{ 
    float:right; 
    background:url('/Content/Images/Dashboard_mockup.png') no-repeat; 
    width:40%; 
    height:290px; 
} 
.landingBottomInfo 
{ 
    width:100%; 
    float:left; 
    padding-left:20px; 
    color:#000000; 
} 
.landingBottomInfoSection 
{ 
    float:left; 
    width:30%; 
    text-align:left; 
    font-size:10px; 
    font-weight:normal; 
    padding-left:20px; 
} 
.landingBottomInfoSectionText 
{ 
    width:66%; 
    float:right; 
    text-align:left; 
} 
.landingBottomInfoSectionTextFirstLine 
{ 
    font-size:11px; 
    font-weight:bold; 
} 
.landingBottom 
{ 
    width:100%; 
    min-height:150px; 
} 
.landingBottomLeftSection 
{ 
    background:url('/Content/Images/BG_gray2_v2.png') no-repeat; 
    width:60%; 
    min-height:140px; 
    float:left; 
} 
.landingBottomLeftSectionTitle 
{ 
    font-weight:normal; 
    font-size:19px; 
    color:#FFFFFF; 
} 
.landingBottomLeftSectionImage 
{ 
    float:left; 
    padding-left:40px; 
    padding-top:10px; 
} 
.landingBottomLeftSectionText 
{ 
    padding-right:100px; 
    padding-top:10px; 
    float:right; 
} 
.landingBottomLeftSectionTextTitle 
{ 
    font-weight:bold; 
    color:#000000; 
    font-size:14px; 
} 
.landingBottomLeftSectionTextSentence 
{ 
    text-align:left; 
    color:#000000; 
    padding-top:10px; 
    padding-left:15px; 
    font-weight:normal; 
    font-size:10px;  
} 
.landingBottomRightSection 
{ 
    padding-top:7px; 
    width:35%; 
    min-height:140px; 
    float:right; 
} 
.landingBottomRightSectionTitle 
{ 
    text-align:left; 
    color:#209202; 
    font-weight:bold; 
} 
.landingBottomRightSectionText 
{ 
    width:70%; 
    color:#000000; 
    font-size:10px; 
    font-weight:normal; 
    padding-top:15px; 
    text-align:left; 
    float:left; 
} 
.landingBottomRightSectionTextLink 
{ 
    text-align:left; 
    padding-top:20px; 
} 
a.landingBottomRightSectionTextLink:link { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:active { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:visited { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:hover { color: #3399FF; text-decoration: underline; font-weight:bold; font-size:11px; } 
.landingBottomRightSectionImage 
{ 
    width:30%; 
    float:right; 
}

Voici une capture d'écran du site affichant correctement dans IE8: alt text
Full Image

Voici le site Web semblant foiré dans IE7: alt text 01 Qu'est-ce que j'ai besoin de changer avec mon CSS pour rendre ma page "OK" dans IE7 et IE8?

Source

2009-07-24 A Salcedo

@Jericho, bon travail sur la fourniture de l'information nécessaire! – mmcdole

Essayez d'identifier le problème. Commencez à supprimer les éléments et les attributs CSS jusqu'à ce que vous voyiez qui est l'attribut noti CSS. –

Commencez par ajouter un flotteur: de gauche à .landingTopInfo:

.landingTopInfo{ 
    float: left; 
    padding-top:10px; 
    text-align:left; 
    width:50%; 
    padding-left:15px;}

Ça va vous mettre dans l'ordre de grandeur.

Pour la zone .landingBottomInfo, je ferais à gauche l'image et les éléments de texte (.landingBottomInfoSectionText) à gauche et définir le remplissage à gauche pour s'adapter.

Source

2009-07-24 15:55:02

@ Jon Galloway, Qui a réellement fonctionné. Pour la partie inférieure, la seule chose que j'ai faite était d'inclure une image dans sa propre classe et le texte de l'autre. Flottés dans différentes directions à l'intérieur d'une section de conteneur. –

Je pense que cela a à voir avec votre utilisation de largeurs basées sur le pourcentage sur un élément flottant. IIRC, IE7 arrondit différemment les calculs de pourcentage à pixel, ce qui peut entraîner une largeur combinée supérieure à 100%.

Source

2009-07-24 15:55:12 richardtallent

supprimez le centre d'alignement (alignez alignez gauche sur le landingMainContainter) et puis flottez le .landingTopInfo gauche.

#landingMainContainer 
{ 
    padding-left:10px; 
    margin: 0 auto; 
    **text-align: left;** 
    min-height: 400px; 
    width: 960px; 
} 

.landingTopInfo 
{ 
    padding-top:10px; 
    text-align:left; 
    width:50%; 
    padding-left:15px; 
    **float:left;** 
}

Source

2009-07-24 16:00:57 easement

Donnez landingTopInfo un padding-top: 10px;

Donnez landingTopInfoText un float: left; et changer son padding-top-10px

Donnez votre "moniteur", "comparer" et "d'afficher des images" chacun un float: left;

Source

2009-07-24 16:08:06

Problèmes de compatibilité avec IE7?

Répondre

Questions connexes