28172 sujets

CSS et mise en forme, CSS3

IE ne sait pas compter jusqu'a 100 ??

<style type="text/css">
html, body {width:100%;
           margin:0;
           padding:0;}
.un{width:18%;
   }
.deux{width:38%;
   }    

div { float:left;
	   background-color: red;
      margin:0 1%;
      border: 0;}
     
</style>
</head>

<body>
<div class="un">&nbsp</div>
<div class="un">&nbsp</div>
<div class="un">&nbsp</div>
<div class="deux">&nbsp</div>
</body>


Si j'ai encore quelques souvenirs de bancs d'école :
3 x (1 + 18 + 1) + (1 + 38 + 1) = 100

Il semblerait que ce ne soit pas le cas pour IE ... ces divs ne tiennent pas dans la largeur de la page ???
Modifié par SpaceFrog (20 Jan 2010 - 15:29)
Bonjour aussi...

Sur les bancs de l'école tu as également du voir un chapitre nommé "arrondi". Les pixels n'étant pas divisibles, il faut bien faire un arondi au pixel supérieur ou inférieur, ce qui peut causer des problèmes de dépassement de conteneur.
sur les bancs d'école 100% = 100%


Ce calcul ne pose pas de problème aux autres navigateurs !
Modifié par SpaceFrog (20 Jan 2010 - 16:00)
Modérateur
Bonjour,

En effet, il s'agit d'un problème d'arrondissement. En réduisant la taille de la fenêtre pixel par pixel, parfois les divs entrent complètement, parfois ils manquent de place.

Firefox ne semble pas avoir ce souci.
SpaceFrog a écrit :
sur les bancs d'école 100% = 100%
Oui, mais (par exemple)30% de 1024px = 307,2px

Tu affiches comment le 0,2px ?

IE n'est juste pas doué pour gérer les arrondis tout en gardant le 100%
ça doit être le pourcent que Bill detourne sur les bénéfices de crosoft Smiley lol
voici un pansement :
<style type="text/css">
html, body {width:100%;
           margin:0;
           padding:0;}
.un{width:18%;
   }
.unpourIEquisaitpasfairelesarrondisdepourcentages{
	width:17%;}
	   
.deux{width:38%;
   }    

div { float:left;
	   background-color: red;
      margin:0 1%;
      border: 0;}
     
</style>
</head>

<body>
<div class="un">&nbsp</div><div class="unpourIEquisaitpasfairelesarrondisdepourcentages">&nbsp</div><div class="un">&nbsp</div><div class="deux">&nbsp</div>
</body>
<< Tu affiches comment le 0,2px ? >>

Je ne sais pas demande à FFX et autres chrome comment ils font Smiley eek
A mon avis il répartissent sur l'ensemble des 100% un arrondi sup entraine un arrondi inf à suivre ???
Et ça IE sait pas faire ...
Modifié par SpaceFrog (20 Jan 2010 - 16:10)
Modérateur
En fait, c'est que Firefox essaye d'équilibrer les largeurs par rapport aux arrondissements. J'ai effectué un test avec un body d'une largeur de 1659 pixels, avec trois divs flottants de 20% et un de 40%. Voici le résultat :

Firefox
332px + 332px + 331px + 664px = 1659px

IE
332px + 332px + 332px + 664px = 1660px

Personnellement, c'est une des raisons pourquoi j'évite autant que possible d'utiliser les pourcentages.
Modifié par Tony Monast (20 Jan 2010 - 16:31)
Bonjour,

1. display:table-cell n'a pas ce problème (mais peut en présenter d'autres).
2. Pourquoi donc faire tenir N flottants dans une largeur, quand on ne pourrait faire flotter que N-1 voire N-2 éléments?
c'est compatible IE le table-cell ?

devrais-je dire interopérable Smiley lol

pour ce qui est de faire flotter N-1 ou -2 pourquoi pas ...

il y a sans doute plusieurs bidouilles pour arriver à peu près au même résultat visuel

Mais bon j'ai encore découvert une des joies d'avoir a composer avec IE Smiley bawling
Modifié par SpaceFrog (20 Jan 2010 - 20:12)
Smiley biggol
tu as déja mis au placard les autres versions et les autres navigateurs ?
Faut signer ou la pétition ?
ça me simplifierait tellement la vie Smiley ravi
SpaceFrog a écrit :
tu as déja mis au placard les autres versions et les autres navigateurs ?

Pour les versions d'IE en dessous de la 8: ça dépend.
Pour les autres navigateurs: ils supportent ça depuis des années.
Modifié par Florent V. (23 Jan 2010 - 19:42)
Sujet clos
Aller à