Wczoraj zapytałem a question in Stackoverflow o problem z marginesem/dopełnieniem w Firefoksie. Dostałem odpowiedź i ją zaakceptowałem. Dzisiaj odkryłem, że mój problem nie został rozwiązany. Tak więc, publikuję nowe pytanie.Przycisk w stylu Css w Firefox ma niechciane wyściółki/margines
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" />
Problemem jest to, że Przycisk nie wygląda OK Firefox:
przyjąłem rozwiązanie sugerowane przez Ant:
.btn::-moz-focus-inner {
padding:0;
border:0;
}
Później odkryłem, że to działa tylko wtedy, gdy pole tekstowe <input type="text"...> istnieje przed przycisk Prześlij. Jeśli nie ma pola tekstowego, z jakiegoś dziwnego powodu problem nadal istnieje. Część po części usunąłem cały plik css, aby zobaczyć, czy niektóre reguły w pliku css powodują problem. To nie pomogło. Utworzono nowy plik o następującej treści:
<!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>
Ten sam problem - przycisk wygląda inaczej w Firefoksie. Tylko w Jsfiddle wszystko jest w porządku.
Poszukuję rozwiązania. Przycisk wygląda brzydko w przeglądarce Firefox, jeśli górny margines jest większy niż dolny margines.
