Pourquoi Google Chrome ne respecte-t-il pas ma propriété display: inline-block?

Question

Je veux créer un formulaire dans un DIV et je voudrais que le DIV ne soit pas plus grand que les éléments du formulaire. J'ai donc conçu ce que mon DIV

<div id="content"> 
     <div id="userNotificationForm"> 
<form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" /> 

    <div class="field"> 
    <label for="user_notification_price">Label</label> <span class="required">*</span> <br> 
    <input size="30" type="text" name="user_notification[price]" id="user_notification_price" /> 
    </div> 

    <div class="actions buttonContainer"> 
    <input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" /> 
    </div> 

</form> 
</div> 
</div> 

et lui a attribué le « display: inline-block » propriété, pensant que ferait la forme aussi grand que nécessaire, et pas plus.

#userNotificationForm { 
    background-color: #fff; 
    display: inline-block; 
    text-align: left; 
} 

Cela fonctionne très bien sur Mac Firefox - https://jsfiddle.net/yj3cdvfy/, mais il faut noter sur Mac Chrome la zone de texte saigne sur le bord du récipient de forme (la partie blanche). Idem pour Safari. Comment faire pour que le conteneur inclue complètement la zone de texte, comme Firefox semble le faire?

Answer 1

Votre CSS ne spécifie aucune largeur explicite, ni pour le formulaire, ni pour l'élément div et input. Mais le balisage HTML spécifie un attribut de taille pour l'élément d'entrée qui fait que Chrome, Chromium et Internet Explorer 11 calculent une largeur supérieure à la largeur de l'élément parent, de sorte que le champ de saisie déborde à l'extérieur.

Spécifiez une largeur: 100% (par rapport à son élément parent) sur l'entrée [type = text] pour l'adapter au formulaire.

input[type=text] { 
    width: 100%; 
    /* ... */ 
} 

Voici un violon mis à jour qui fonctionne dans les navigateurs actuels (Chrome 60, Firefox 55 et Internet Explorer 11): https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/