Kind Element füllt nicht Taste

Question

Ich möchte das innere Element (Steckplatz in diesem Fall), um die Taste zu füllen. Es funktioniert in Chrom aber nicht in FireFox. Ich denke, es könnte Benutzer-Agent-Stile in FireFox verwenden. Ich kann nicht angeben, wie breit die Schaltfläche ist, weil ich ihre Größe nicht weiß (nicht fest).

jsbin Link zu spielen, um:

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

Was ich bisher habe:

HTML:

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

CSS:

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

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

Screenshots

FireFox:

Chrome:

Answer 1

Sie müssen die extra Polsterung für firefox-Taste entfernen:

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

Answer 2

müssen Sie CSS auf einem CSS-Reset-Stylesheet schreiben, zum Beispiel eine Taste Reset 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; 
}