子元素不会填充按钮

Question

我想要内部元素（在这种情况下是插槽）来填充按钮。它适用于chrome，但不适用于FireFox。我认为在FireFox中可能会使用用户代理样式。我无法指定按钮的宽度，因为我不知道它的大小（不固定）。

jsbin链接玩：

http://jsbin.com/pucapoxizi/1/edit?html,css,output

到目前为止我得到了什么：

HTML：

<button>
  <slot>abc</slot>
</button>

CSS：

button {
  border: 0;
  padding: 0;
  background: red;
}

slot {
  width: 100%;
  background: green;
}

截图

的FireFox：

铬：

Answer 1

你需要删除firefox按钮的额外填充：

button::-moz-focus-inner {
  padding: 0;
  border: 0
}

Answer 2

你需要在css重置样式表的顶部写css，例如按钮重置css

button {
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;
}

button::-moz-focus-inner {
    border: 0;
    padding: 0;
}