Ieri ho chiesto a question in Stackoverflow in merito al margine/problema di riempimento in Firefox. Ho ricevuto una risposta e l'ho accettata. Oggi ho scoperto che il mio problema non è risolto. Quindi, posto una nuova domanda.Il pulsante in stile Css in Firefox ha imbottitura/margine indesiderati
CSS:
.btn {
text-align: center;
color: #333;
font-weight: 700;
font-size: 11px;
font-family: tahoma, verdana, arial, helvetica;
background: -webkit-linear-gradient(#fefefe, #e7e7e7);
background: -o-linear-gradient(#fefefe, #e7e7e7);
background: -moz-linear-gradient(#fefefe, #e7e7e7);
background: linear-gradient(#fefefe, #e7e7e7);
height: 24px;
width: auto;
overflow: visible;
border: 1px solid #c4c4c4;
padding: 0 10px;
line-height: 22px;
border-radius: 3px;
}
.btn:hover {
color: #111;
border: 1px solid #555;
}
Html
<input type="submit" value="Submit" class="btn" />
Il problema è che questo Pulsante non sembra OK in Firefox:
ho accettato la soluzione suggerita da Ant:
.btn::-moz-focus-inner {
padding:0;
border:0;
}
Più tardi ho scoperto che funziona solo se un campo di testo <input type="text"...> esiste prima pulsante di invio. Se non ci sono campi di testo, per qualche strana ragione il problema esiste ancora. Parte per parte ho cancellato l'intero file css per vedere alcune regole nel file css stanno causando il problema. Non ha aiutato. Ho creato un nuovo file con il seguente contenuto:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
.btn {
text-align: center;
color: #333;
font-weight: 700;
font-size: 11px;
font-family: tahoma, verdana, arial, helvetica;
background: -webkit-linear-gradient(#fefefe, #e7e7e7);
background: -o-linear-gradient(#fefefe, #e7e7e7);
background: -moz-linear-gradient(#fefefe, #e7e7e7);
background: linear-gradient(#fefefe, #e7e7e7);
height: 24px;
width: auto;
overflow: visible;
border: 1px solid #c4c4c4;
padding: 0 10px;
line-height: 22px;
border-radius: 3px;
}
.btn:hover {
color: #111;
border: 1px solid #555;
}
.btn::-moz-focus-inner {
padding:0;
border:0;
}
</style>
</head>
<body>
<input type="submit" value="Submit" class="btn" />
</body></html>
Lo stesso problema: il pulsante sembra diverso in Firefox. Solo in Jsfiddle tutto è OK.
Quindi, sto cercando una soluzione. Il pulsante sembra brutto in Firefox se il margine superiore è maggiore del margine inferiore.
