IE7 éléments par défaut à 100% largeur

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

  •  03-07-2019
  •  | 
  •  

Question

J'ai une problématique vraiment frustrante avec une application Web sur laquelle je travaille (je ne l'avais pas écrite à l'origine). Il utilise des cadres pour la mise en page assez effrontément. Le problème que je rencontre est que tous les éléments avec une couleur d’arrière-plan et une bordure définies par CSS à 100% largeur par défaut. Je viens de tester des éléments div, des éléments de paragraphe, etc.

J'ai enlevé complètement la feuille de style, puis je l'ai testée et j'ai le même problème. Ce n'est donc pas la feuille de style qui est à l'origine du problème.

J'ai écrit un test rapide pour vérifier qu'il ne s'agissait pas d'un code conflictuel et utilisais le même doctype et les mêmes xmlns que le nôtre - le même problème se pose. Voici l'exemple de code. 

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

Des idées?

Était-ce utile?

La solution

Je pense que cela est requis par HTML / CSS. Les éléments de bloc s’étendent sur toute la largeur, à moins que quelque chose ne les arrête.

(FF a le même comportement.)

Autres conseils

Ce n’est pas parce que l’élément a un arrière-plan ou une bordure qu’il étend au maximum avec le parent, c’est parce qu’il s’agit d’un élément de bloc. L’arrière-plan ou la bordure vous permet simplement de voir la taille réelle de l’élément.

La largeur par défaut n’est pas "100%", mais "auto". La différence pratique réside dans le fait que l'élément, y compris les bordures, utilise 100% de la largeur, au lieu de la largeur hors bord devenant 100% de la largeur (la largeur incluant les bordures est plus large que son parent).

Si vous ne souhaitez pas que l'élément utilise la largeur disponible, vous pouvez en faire un élément flottant. Ensuite, il s'adaptera à son contenu. 

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

Comme le disent Richard et BeefTurkey, les div sont des éléments de bloc et occuperont toute la largeur du navigateur.

Vous pouvez utiliser un élément en ligne, tel qu'un span 

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

ou ajoutez du style à votre div pour le forcer à être en ligne 

div#test { display: inline; }

Les divs ne sont-ils pas divisés par défaut à 100% (de la taille des parents) car ce sont des blocs? Vous pouvez toujours essayer de changer l’affichage en ligne: #test {display: inline;}

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top