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

StackOverflow https://stackoverflow.com/questions/502196

  •  20-08-2019
  •  | 
  •  

Question

J'aimerais avoir sur ma page un div qui est centré et a une certaine largeur, mais qui dépasse cette largeur si le contenu l'exige. Je le fais avec ce qui suit: 

<!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. Avez-vous des conseils sur la façon de faire fonctionner cela sur IE6?

Était-ce utile?

La solution

Ce n’est pas une solution parfaite, mais certains problèmes liés au manque de prise en charge de IE-largeur par IE6 ont été résolus. 

<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 balise qui pourrait aider dans cette situation est la balise de débordement.

Autres conseils

En fait, Alessandro IE6 comprend display: inline-block, ce qu’il ne comprend pas à propos de votre code, c’est le min-width. Il existe de nombreux bidouillage pour que cela fonctionne , mais je ne le ferais pas. t recommander aucun d'entre eux. Si vous envisagez d’utiliser l’un d’eux, veillez à les placer dans une feuille de style spécifique à IE6 afin qu’elle n’interfère pas avec vos autres navigateurs de réclamations plus standard. 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top