Usuń pełną stylizację przycisku HTML/prześlij

Jestem stylizowany przycisk przesyłania w css dla wszystkich przeglądarek jego praca jest dobra we wszystkich przeglądarkach z wyjątkiem ie7 Po kliknięciu przycisku Wyślij przesuwa się trochę do góry. To sprawia, że wygląda na kształt. Użyłem określonego css dla np.Usuń pełną stylizację przycisku HTML/prześlij

Oto kod, który kiedyś:

.button 
{ 
    width : 80px; 
    background : none; 
    cursor : pointer; 
    font-family : 'voltaeftu-regular',Times New Roman; 
    font-size : 16px; 
    color : #fff; 
    border : none; 
    margin  : 0px; 
    padding  : 0px; 
}

Źródło

2010-06-24 Mayur

ja nie wiem, czy to jest problem, ale można spróbować ustawić stan aktywny także:

.button, .button:active{ 
... 
}

EDIT: zastosowano następujące mini-próbki w IE7 i mogę zobaczyć przycisk kroczących:

<html> 
<head> 
<style type="text/css"> 
.button 
{ 
width : 80px; 
background : none; 
cursor : pointer; 
font-family : 'voltaeftu-regular',Times New Roman; 
font-size : 16px; 
color : #fff; 
border : 1px solid #0f0; 
margin  : 0px; 
padding  : 0px; 
} 
</style> 
</head> 
<body style="background:#f00;"> 
    <input class="button" type="submit"/> 
</body> 
</html>

Wystarczy ustawić bo rder, aby zobaczyć otoczenie przycisku. Kod działa dla mnie.

Źródło

2010-06-24 13:58:42 Marks

Znaki HI Próbowałem również, ale nie działa, jest jakiś sposób, aby rozwiązać ten problem. – Mayur

Możesz wypróbować jeden z reset css i sprawdzić, czy problem nadal istnieje. Ale w szybkim spojrzeniu na reset css nie widziałem nic ustawionego dla przycisku, który mógłby spowodować to. – Marks

Tak, obawiam się, że jest to nieunikniony problem z przyciskami stylizacji, że IE (i Opera) przesunie zawartość przycisku w dół i w prawo o jeden piksel po kliknięciu.

Masz kilka możliwych podejść tutaj:

Użyć <button> z <span> środku zamiast <input type="button">. Umieść przycisk relative i przęsło absolute w taki sposób, aby ruch zawartości przycisku nie wpłynął na zakres. Brzydki i będzie łamał się w innych przeglądarkach, więc chciałbyś, aby ta stylizacja dotyczyła IE-i-może-Opery.
Użyj łącza oznaczonego jako przycisk zamiast rzeczywistego przycisku, ze skryptem zastosowanym do zdarzenia click. W przeciwieństwie do przycisków, masz pełną kontrolę nad spójnym stylem linków. Odradzałbym to, ponieważ przeciągasz obciążenia związane z zachowaniami linków, które nie mają sensu dla przycisku, np. Kliknięcie środkowe, kliknięcie prawym przyciskiem myszy, przeciąganie i upuszczanie itp. Wiele osób korzysta z linków wykonywanie zadań z przyciskami, ale IMO jest wysoce niepożądane. (Zwłaszcza, gdy korzystają javascript: linki ... upiorne.)
pomocą nieaktywnego elementu takiego jak <span> zamiast rzeczywistej przycisk z skrypt zastosowanego do jego click imprezy. Ponownie uzyskasz pełną kontrolę stylizacji. To właśnie SO wykorzystuje do działań takich jak "dodaj komentarz". Problem polega na tym, że łamiesz nawigację po klawiaturze; nie można używać tabulatora, przestrzeni itp. do nawigacji i włączania elementów sterujących. Możesz włączyć nawigację za pomocą klawiatury w większości przeglądarek, nadając elementowi atrybut tabindex, ale umieszczenie tabindex na nieaktywnym elemencie jest nieprawidłowym kodem HTML. Możesz alternatywnie napisać to ze skryptu, a także dodać skrypt, aby zwolnić miejsce lub wrócić, aby aktywować przycisk faux. Ale nigdy nie będziesz w stanie dokładnie odtworzyć zachowania pola formularza przeglądarki.
Wymień całość na <input type="image">. Naturalnie masz doskonałą kontrolę nad obrazem w pikselach! Jednak próba dopasowania stylów renderowania i generowania nowego obrazu dla każdego przycisku jest zwykle zbyt dużym bólem szyi.

opcje 2 i 3 mają również problem, że wprowadzenie ich zależność JavaScript, dzięki czemu postać złamie gdy JS jest niedostępny.Możesz to złagodzić, używając standardowego <button> w znacznikach i zastępując go innymi kontrolkami ze skryptu lub jeśli tworzysz je ze skryptu, i tak nie ma problemu. Ale w końcu, mój zwykły wniosek jest taki, że to wszystko jest zbyt wielkim wysiłkiem i zbyt kruchym rezultatem, i że najlepszą rzeczą jest tłoczyć dla opcji 0:

Mieszkać z tym. Zwykle nie jest tak źle, że treść przycisku porusza się trochę po kliknięciu.

Źródło

2010-06-24 15:12:59 bobince

To również mnie drażniło przez długi czas, ale znalazłem przyzwoite rozwiązanie.

Najpierw potrzebujesz sposobu na kierowanie określonej przeglądarki w swoim CSS. Można użyć modernizr lub mój osobisty faworyt, to słodki mały fragment z http://rog.ie/post/9089341529/html5boilerplatejs

<script> 
var b = document.documentElement; 
b.setAttribute('data-useragent', navigator.userAgent); 
b.setAttribute('data-platform', navigator.platform); 
</script>

Dalej, w dokumencie HTML, w swoim przycisk dodaj <span> tag, który przechowuje zawartość przycisku. Styl to wyglądać dobrze w przyjaznych dla przeglądarek, a następnie dodać ten kawałek kodu :active stylów przycisku w swojej CSS:

html[data-useragent*='Opera']

Można zastąpić Opera z dowolną nazwą przeglądarki, a następnie styl dla span do własnych upodobań.

To może wyglądać mniej więcej tak:

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

To trochę hacky i zapewne przesadą taki mały problem, ale to działa. Najlepszy ze wszystkich, masz precyzyjną kontrolę nad wszystkim. Można nawet kierować tylko maszyny Windows lub iPadów (z data-platform='iPad') lub konkretną wersję przeglądarki, na przykład:

html[data-useragent*='Chrome/13.0']

Powodzenia!

Źródło

2012-06-10 17:36:20

to powinno otrzymać więcej głosów upvotes – Forza

Usuń pełną stylizację przycisku HTML/prześlij

Odpowiedz

Powiązane problemy