CSS max-width pour cent
max-largeur avec un pour cent ne semble pas fonctionner dans les deux IE 8 ou Firefox 3. Pixel en largeurs de travail de l'amende. Ai-je raté quelque chose?
J'ai un formulaire de saisie, et je veux afficher un texte explicatif à la droite de celui-ci. Mais je ne veux pas le texte explicatif de la courge à la forme.
Je n'ai pas utilisé max-width avant, mais il semblait être une excellente solution. J'ai écrit cette simple feuille de style CSS:
div.hint {max-width: 50%; float: right;}Ensuite, j'ai écrit:
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...De la div.indicateur de courges la forme gravement à la gauche.
J'ai essayé avec juste un peu de texte au lieu de la forme. La div.indice prend environ 95% de l'écran, donne juste une petite marge sur la gauche, et l'autre texte est poussé complètement en dessous.
Si je change le max-width à partir d'un pourcentage à un nombre fixe de pixels, il semble fonctionner. Mais je ne veux pas de la fonder sur des pixels parce que je ne connais pas les dimensions du navigateur de l'utilisateur.
Ne % pas travailler avec max-width malgré ce que j'ai lu dans la documentation, ou ai-je raté quelque chose?
En réponse à Seanmonster commentaire: Ici, je vais vous donner un trivial mais complète de la page web qui illustre ce que je pensais devrait fonctionner, mais n'a pas:
<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>
<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>Quand j'ai ouvert cette page dans un navigateur, j'obtiens, pas deux colonnes, mais le "hint" div prenant 100% de la largeur, et au-dessous de la "forme" div prenant 100% de la largeur. Si je modifie à la fois le max-width pour "width: 50%", j'obtiens deux colonnes que je m'attends. Apparemment, je suis absent quelque chose à propos de la façon dont max-width est censé fonctionner, mais ... je ne l'obtenez pas.
J'ai ouvert votre exemple de code dans FF3.5.3 sur Mac et PC et il a très bien fonctionné. Je ne obtenir le comportement que vous décrivez dans IE 7, et n'ont pas 8 afin de le tester.
J'ai seulement tenté l'exemple ci-dessus avec IE 8 avant de le poster. Je vais prendre votre mot sur ce que cela fonctionne avec Firefox. Mais j'ai essayé d'autres, les exemples de ce genre qui a échoué de la même façon avec Firefox, donc, apparemment, ils ne sont pas totalement à l'abri de la cause de racine ici. En tout cas, je veux vraiment quelque chose qui fonctionne avec au moins IE 7, IE 8 et Firefox 3, comme ceux qui sont sans doute le plus populaire des navigateurs.
OriginalL'auteur Jay | 2009-10-04
Vous devez vous connecter pour publier un commentaire.
max-width sur IE8 est buggé sous de multiples scénarios. C'est un problème connu.
Vous pouvez trouver un article sur le sujet ici. http://edskes.net/ie8overflowandexpandingboxbugs.htm
Vous avez besoin de trois choses pour déclencher ce bug - maxwidth, les barres de défilement, et de flotter
Je pense que le bug se produit dans plus de situations que ce poste indique parce que j'ai eu, par exemple, essayer de le faire avec un tableau à deux colonnes, plutôt que d'utiliser des float. Mais grâce: Sachant que c'est un bug connu et pas juste que je suis fou ne résout pas le problème, mais au moins, me dit de chercher une solution complètement différente.
J'ai essayé de bricoler avec réglage de la largeur de l'élément parent à 100% dans un de mes cas de test et il n'a pas aidé. Il est certainement possible que grâce à la bonne combinaison de paramètres de fonctionnement et je n'ai même pas touché. Ah bien, je pense que je vais abandonner max-width jusqu'à ce que les nouvelles versions de navigateurs sortir.
Il y a un cheat correctif pour IE8. Tout ce que vous avez à faire est d'ajouter le code suivant à votre balise head avant votre titre - <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Qui fera de tous ie8 pages se comportent la plupart du temps comme IE7 et retirer des problèmes que vous rencontrez entièrement. Il ne sera pas très firefox pour le problème, mais cela rendra votre vie plus facile. Il y a quelques natif IE8 style de bugs qui sont si mauvais qu'ils vont planter le navigateur.
OriginalL'auteur diadem
Max-width fonctionne parfaitement bien dans FF3 et IE8 avec des pourcentages. Pourcentages, cependant, sont basés sur le parent de largeur. Pas d'enfants autour d'elle.
Les enfants autour d'elle? Ce n'est pas vraiment... entendez-vous des frères et sœurs?
OriginalL'auteur seanmonstar
Si vous étiez à flotteur de la div.soupçon et de la forme à la fois à la gauche et à la fois avec un max-width de 50%, ils ne doivent pas s'écraser les uns les autres.
OriginalL'auteur CMN