CSS DIV La largeur par défaut est bonne dans IE. Pas Firefox

J'ai mis en place un exemple de ce que je rencontre ici: http://studiozion.com/cssproblem/fix_it.htm.CSS DIV La largeur par défaut est bonne dans IE. Pas Firefox

blocs de code pertinents ...

<style type="text/css"> 
 
body 
 
{ 
 
    background: transparent url(Grade300_Color1.png) repeat-x 
 
    } 
 
.RowMaker 
 
{ 
 
    overflow: auto; 
 
} 
 
.ColumnMaker 
 
{ 
 
    float: left; 
 
} 
 
.ColumnMaker2 
 
{ 
 
    float: right; 
 
} 
 
.PadTop 
 
{ 
 
    padding-top: 10px; 
 
} 
 
.PadBot 
 
{ 
 
    padding-bottom: 10px; 
 
} 
 
.PadLeft 
 
{ 
 
    padding-left: 15px; 
 
} 
 
.PadRight 
 
{ 
 
    padding-right: 15px; 
 
} 
 
.ControlCurve1 
 
{ 
 
    height: 6px; 
 
    background: transparent url(ControlCurve1.png) no-repeat right -6px 
 
    } 
 
.ControlCurveRight1 
 
{ 
 
    height: 6px; 
 
    width: 6px; 
 
    background: transparent url(ControlCurve1.png) no-repeat top left 
 
    } 
 
.ControlCurveLeft1 
 
{ 
 
    height: 6px; 
 
    width: 6px; 
 
    background: transparent url(ControlCurve1.png) no-repeat bottom left 
 
    } 
 
</style>

<div class="RowMaker"> 
 
    <div class="ColumnMaker ControlCurveLeft1"><span></span></div> 
 

 
    <div class="ColumnMaker ControlCurve1"> 
 
     <div class="RowMaker"> 
 
      <div class="ColumnMaker2 ControlCurveRight1"><span></span></div>  
 
     </div> 
 
    </div> 
 
</div>

Donc, la question est que la div avec classe "ColumnMaker ControlCurve1" élargira pour remplir la largeur du conteneur parent avec classe "RowMaker" dans IE créant une belle petite casquette biseautée pour un div. Mais dans Firefox, la div "ColumnMaker ControlCurve1" tronque en alignant le côté droit du capuchon biseauté.

Alors, qui a raison? Et plus important encore, comment puis-je corriger cela tout en conservant la flexibilité d'un élément visuel qui se développe dans son conteneur parent? Je ne veux vraiment pas définir une largeur fixe sur "ColumnMaker Control1".

Source

2009-04-23 Anonymous

Votre lien ne fonctionne plus. Jamais, jamais utiliser IE comme une référence pour la façon dont les choses devraient fonctionner. Firefox montrera ce que vous avez écrit dans la plupart des cas alors que IE fait les choses au fur et à mesure. Ne jamais faire confiance à IE pour faire quelque chose de bien. C'est le pire navigateur de la planète. – Rob

Firefox est toujours la bonne (j/k)

ce problème a été résolu plusieurs fois auparavant. Je suggère une recherche rapide pour trouver des choses comme

http://redmelon.net/tstme/4corners/

http://kalsey.com/blog/2003/07/rounded_corners_in_css/

il y a aussi une solution jquery

http://www.malsup.com/jquery/corner/

Source

2009-04-23 22:21:25 phillc

"Firefox est toujours le bon" n'est pas vraiment précis. Tous les navigateurs suivent leur propre interprétation des normes, choisissent et choisissent ce qu'ils vont soutenir et comment ils vont le soutenir. La plupart du temps, comparé à, par exemple, firefox est correct, mais il y a des choses qu'il fait mal ou tout simplement ne supporte pas. –

@ JimmieR.Houts - Vous avez raison et le mantra du développeur web général est: "Si cela fonctionne dans IE, mais pas Firefox (Chrome/Safari/Opera), alors le balisage est faux." – Rob

vous devez effacer vos flotteurs. dans votre feuille de style, inclure le code suivant pour le CONTAINER qui a des flotteurs en elle:

#yourContainer:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
}

vous pouvez aussi (et devrait également) effacer vos flotteurs pour IE en mettant min-height: 10px; dans votre définition de style #yourContainer.

Il est également possible que, parce que vous n'avez pas de contenu et que vous n'avez pas défini de largeur, le div ne s'étendra à rien.

Juste quelques réflexions regardant sans vraiment tester.

Source

2009-04-24 04:22:59 Jason

CSS DIV La largeur par défaut est bonne dans IE. Pas Firefox

Répondre

Questions connexes