为什么谷歌浏览器不尊重我的 display:inline-block 属性？答案

【问题标题】：Why is Google Chrome not respecting my display:inline-block property?为什么谷歌浏览器不尊重我的 display:inline-block 属性？
【发布时间】：2018-02-16 16:19:09
【问题描述】：

我想在 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>

并为其分配“display:inline-block”属性，认为这会使表单尽可能大，而不是更大。

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

这在 Mac Firefox 上运行良好 -- https://jsfiddle.net/yj3cdvfy/ ，但请注意在 Mac Chrome 上，文本框在表单容器的边缘（白色部分）溢出。同样适用于 Safari。如何让容器完全包含文本框，就像 Firefox 似乎做的那样？

【问题讨论】：

您没有为您的input 指定width - 指定width:100% 可以解决您的问题。
确实如此。谢谢！

标签： html css google-chrome inline display

【解决方案1】：

您的 CSS 没有为表单、div 和输入元素指定任何明确的宽度。但是 HTML 标记为 input 元素指定了一个 size 属性，这使得 Chrome、Chromium 和 Internet Explorer 11 计算的宽度大于父元素的宽度，因此输入字段会溢出。

在 input[type=text] 上指定宽度：100%（相对于其父元素）以使其适合表单。

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

这是一个更新的小提琴，适用于当前浏览器（Chrome 60、Firefox 55 和 Internet Explorer 11）： https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/

【讨论】：