IE7 imposta automaticamente gli elementi su Larghezza 100%

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

  •  03-07-2019
  •  | 
  •  

Domanda

Ho un problema davvero frustrante con un'applicazione web su cui lavoro (inizialmente non l'ho scritto). Usa i frame per il layout abbastanza scarsamente. Il problema che sto riscontrando è che tutti gli elementi con un colore di sfondo e un bordo impostati tramite CSS sono impostati su una larghezza del 100%. Ho appena testato elementi div, elementi di paragrafo ecc.

Ho rimosso completamente il foglio di stile, quindi l'ho testato e ho avuto lo stesso problema, quindi non è il foglio di stile a causare il problema.

Ho scritto un test rapido per assicurarmi che non fosse un codice in conflitto e ho usato lo stesso doctype e xmlns dei nostri - ho lo stesso problema. Ecco il codice di esempio. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

Qualche idea?

È stato utile?

Soluzione

Penso che ciò sia richiesto da HTML / CSS. Gli elementi di blocco estendono l'intera larghezza a meno che non ci sia qualcosa che li fermi.

(FF ha lo stesso comportamento.)

Altri suggerimenti

Non è perché l'elemento ha uno sfondo o un bordo che si espande completamente con il genitore, è perché è un elemento a blocchi. Lo sfondo o il bordo ti fanno vedere quanto è grande l'elemento.

La larghezza predefinita non è in realtà " 100% " ;, ma " auto " ;. La differenza pratica è che l'elemento compreso i bordi usa il 100% della larghezza, invece che la larghezza escludendo i bordi diventa il 100% della larghezza (rendendo la larghezza compresi i bordi più ampia di quella principale).

Se non si desidera che l'elemento utilizzi la larghezza disponibile, è possibile renderlo un elemento mobile. Quindi si adatterà al suo contenuto. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Come dicono Richard e BeefTurkey, i div sono elementi a blocchi e riempiranno la larghezza del browser.

Puoi utilizzare un elemento incorporato, ad esempio un intervallo 

<span id="test">
    Test information!
</span>

o aggiungi un po 'di stile al tuo div per forzarlo ad essere in linea 

div#test { display: inline; }

I div non sono predefiniti al 100% (delle dimensioni dei genitori) perché sono blocchi? Puoi sempre provare a cambiare display in inline: #test {display: inline;}

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top