CSS/HTML IE 不会在引导按钮的右侧留下边距答案

【问题标题】：CSS/HTML IE doesn't leave margin on the right right side in bootstrap buttonCSS/HTML IE 不会在引导按钮的右侧留下边距
【发布时间】：2019-08-01 14:47:51
【问题描述】：

我在 CSS 方面完全是初学者，但我不明白为什么在 Chrome/Firefox/Safari 中我有正确的引导按钮样式，比如这里 - https://monosnap.com/file/leLdh4XFNlzBoXbA2xHuvnW7nGDHMH 并且不知何故在 IE 中有所不同 - https://monosnap.com/file/tuNAlM5MsJm6U80Z1TAR1uu9frN0SN

styling.scss

&__button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.6rem;
  font-weight: bold;
  height: 4.8rem;
  justify-content: center;
  letter-spacing: .7px;
  line-height: 2rem;
  text-align: center;
  width: 18.4rem;

  &-overview {
    background-color: $c-blue;
    color: $c-white;
    padding: 0 1.5rem;
    width: max-content;
  }
}

button.html.erb

<div class="text-center">
  <%= link_to t('.bank_to_employees_overview'), bank_employees_path, class: "bank-employee__button bank-employee__button-overview" %>
</div>

【问题讨论】：

尝试使用 .px-3 类添加填充，而不是使用 &-overview { padding: 0 1.5rem;} 添加它。
嘿...如果我添加.px-3 并从.overview 中删除padding 它将在IE 上运行，但在其他浏览器中我会有这样的东西 - monosnap.com/file/320x1g7mUM6p4jr0sCAovVP8WNhfvk
这就是您的 button.html.erb 文件中的全部内容吗？它是部分的吗？如果是，你是如何渲染它的？
@Jake 不，它在另一个 div class="container" 里面。这不是部分的，除了这个按钮之外，只有您在屏幕上看到的确认文本。

标签： html css ruby-on-rails

【解决方案1】：

本主题的回答修复了问题CSS - Padding in IE issue?

IE 将填充计算为高度/宽度的一部分，其他浏览器将其解释为高度/宽度加上填充。所以尽量只给出高度/宽度或填充/边距。

因此，如果我删除 width 和 padding 并添加 .px-3 就像在 cmets 中建议的 @Jeremy 一样，它将在所有浏览器上按预期工作

【讨论】：