HTML/CSS: Création d'une div centrée avec une largeur minimale

J'aimerais avoir sur ma page un div qui est centré et qui a une certaine largeur, mais qui s'étend au-delà de cette largeur si le contenu l'exige. Je fais ce qui suit:HTML/CSS: Création d'une div centrée avec une largeur minimale

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      .container-center { 
       text-align: center; 
      } 
      .container-minwidth { 
       min-width: 5em; 
       display: inline-block; 
       border: 1px solid blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container-center"> 
      <div class="container-minwidth"> 
       a 
      </div> 
     </div> 
    </body> 
</html>

Cela fonctionne très bien sur Firefox/Safari, mais pas sur IE6, qui ne comprend pas le display: inline-block. Des conseils sur comment faire ce travail sur IE6 aussi bien?

Source

2009-02-02 avernet

IMO il devrait juste être laissé pour sembler mauvais sur IE6. –

Ce n'est pas une solution parfaite, mais j'ai eu quelques problèmes de IE6 manque de support pour min-largeur en disant.

<style type="text/css">    
      .container-minwidth { 
       min-width: 5em; 

       width: auto !important; 
       width: 500px; /* IE6 ignores the !important tag */ 

       /* would help for expanding content if it blows past 500px; */ 
       overflow:auto; 

       display: inline-block; 
       border: 1px solid blue; 
      }   
</style>

L'autre étiquette qui pourrait aider dans cette situation est l'étiquette de débordement.

Source

2009-02-02 04:49:06 bendewey

En fait Alessandro IE6 comprend display: inline-block, ce qu'il ne comprend pas à propos de votre code est le min-width. Il y a many hacks to get this to work, mais je ne recommanderais aucun d'entre eux. Si vous allez utiliser l'un d'entre eux assurez-vous de les mettre dans une feuille de style IE6 spécifique afin qu'il n'interfère pas avec vos autres navigateurs de plaintes plus standard.

Source

2009-02-02 04:49:51

<style type="text/css">    
     .container-minwidth { 
      min-width: 5em; 
      _width: 500px; 
      white-space:nowrap; 

      display: inline-block; 
      *display:inline; 
      *zoom:1; 

      border: 1px solid blue; 
     }   
</style>

Source

2012-05-07 02:45:37 Jace

Vous voudrez peut-être expliquer votre réponse au profit de l'OP – Luca

HTML/CSS: Création d'une div centrée avec une largeur minimale

Répondre

Questions connexes