HTML / CSS: creazione di un div centrato con una larghezza minima

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

  •  20-08-2019
  •  | 
  •  

Domanda

Vorrei avere sulla mia pagina un div che è centrato e ha una certa larghezza, ma che si estende oltre quella larghezza se richiesto dal contenuto. Lo sto facendo con il seguente: 

<!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>

Funziona alla grande su Firefox / Safari, ma non su IE6, che non comprende display: inline-block. Qualche consiglio su come farlo funzionare anche su IE6?

È stato utile?

Soluzione

Non è una soluzione perfetta, ma ho risolto alcuni problemi relativi alla mancanza di supporto di IE6 per la larghezza minima dicendo. 

<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'altro tag che potrebbe aiutare in questa situazione è il tag di overflow.

Altri suggerimenti

In realtà Alessandro IE6 capisce display: inline-block, ciò che non capisce sul tuo codice è min-width. Ci sono molti hack per farlo funzionare , ma non vorrei non consiglio nessuno di loro. Se hai intenzione di usarne uno, assicurati di inserirli in un foglio di stile specifico per IE6 in modo che non interferisca con gli altri browser per i reclami più 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top