Google Chromeがディスプレイを尊重しないのはなぜですか：インラインブロックのプロパティですか？

Question

私はDIVでフォームを作成したいと思っています。私はDIVをフォームの要素より大きくしたくありません。だから、私は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> 

としてこれを細工し、それを「表示：インラインブロック」に割り当てられているプロパティ、それは必要に応じて、フォームが同じ大きさにするだろうと考え、無大きめ。

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

これは、MacのFirefoxで正常に動作します - https://jsfiddle.net/yj3cdvfy/が、テキストボックスがフォームコンテナ（白部分）の端に出血マックChromeで気づきます。 Safari用の同上。 Firefoxのように、コンテナにテキストボックスを完全に含めるにはどうすればいいですか？

Answer 1

あなたのCSSは、フォーム、div要素、input要素のいずれにも明示的な幅を指定しません。しかし、HTMLマークアップは、Chrome、Chromium、Internet Explorer 11が親要素のwidhtよりも大きな幅を計算する入力要素のサイズ属性を指定しているため、入力フィールドが外側にオーバーフローします。

入力：[タイプ=テキスト]に100％（親要素を基準にして）幅を指定すると、フォームに収まるようになります。

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

ここ

は、現在のブラウザ（クローム60は、Firefox 55、およびInternet Explorer 11）で働く更新フィドルです：あなたは、あなたの `input`のための` width`を指定していない https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/