[CSS] Knepig fråga om knapp i Safari

Permalänk

[CSS] Knepig fråga om knapp i Safari

Hej!

Sitter och försöker styla en knapp (button-element) så att den ser likadan ut i .. hrm .. alla browsers (fråga mig inte varför, nu är det bara så). Men Safari verkar lägga på någon #$@!# padding i sidled på elementet. Någon som vet om det går att få bort? I Chrome finns inte denna extra padding trots att båda kör webkit. Detta föranleder mig att misstänka user agent stylesheet men har inte lyckats hitta något där heller. Googlande har inte heller gett något resultat. Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Meh</title> <style type="text/css" media="screen"> button { width: auto; overflow: visible; cursor: pointer; padding: 0; margin: 0; border: none; display: block; font-size: 14px; line-height: 14px; background-color: red; color: white; float: left; } </style> </head> <body> <div> <button type="submit" value="submit">M</button> </div> </body> </html>

Jämför ovan kod i Safari vs Chrome t.ex.

Visa signatur

/Mvh Stefan

Permalänk
Medlem

Kolla om det blir någon skillnad om du sätter !important på alla attribut. Om inte så är det antagligen Safari som verkligen skriker om att du inte får ändra stilen helt på den.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Skrivet av ToJa92:

Kolla om det blir någon skillnad om du sätter !important på alla attribut. Om inte så är det antagligen Safari som verkligen skriker om att du inte får ändra stilen helt på den.

Hjälpte inte tyvärr :/

Visa signatur

/Mvh Stefan

Permalänk
Medlem
Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Skrivet av ToJa92:

Nopes, har redan lusläst den + 50 andra artiklar i ämnet buttons. Just det här problemet verkar ha uppstått i Safari 4 / 5. Fruktansvärt irriterande..

Visa signatur

/Mvh Stefan

Permalänk
Medlem

User-agent stylesheet skiljer sig inte för denna button. Jag jämförde denna mellan Chrome och Safari.

Däremot skiljer sig "Computed Style", det vill säga tolkningen och därmed renderingen. Aktivera Developer Toolbar i Safari så kan du kolla och jämföra med Chromes dito verktyg. De renderade egenskaper som skiljer sig är font-family, height och width. Att sätta en font-family förändrade inte att height och width diffar.

Med andra ord är detta ett renderingsfråga, vilket gör det väldigt svårt för dig att fixa. Föreslår att du ändrar din design så att detta inte blir så pass avgörande, alternativt väljer ett annat HTML-element till ändamålet. Om det bara är en type="button" funkar ju en länk lika bra t.ex.

Permalänk
Skrivet av azoapes:

User-agent stylesheet skiljer sig inte för denna button. Jag jämförde denna mellan Chrome och Safari.

Däremot skiljer sig "Computed Style", det vill säga tolkningen och därmed renderingen. Aktivera Developer Toolbar i Safari så kan du kolla och jämföra med Chromes dito verktyg. De renderade egenskaper som skiljer sig är font-family, height och width. Att sätta en font-family förändrade inte att height och width diffar.

Med andra ord är detta ett renderingsfråga, vilket gör det väldigt svårt för dig att fixa. Föreslår att du ändrar din design så att detta inte blir så pass avgörande, alternativt väljer ett annat HTML-element till ändamålet. Om det bara är en type="button" funkar ju en länk lika bra t.ex.

Här jämfört widthen i developerverktygen och ser också att den skiljer sig just i safari, och det verkar bara vara på button-elementet. Men hur kan renderingen skilja sig mellan två olika webkit-browsers? Borde inte renderingsmotorn resultera i samma resultat i det här fallet?

Nu är det förvisso bara i safari som en knapptext hoppar två pixlar åt sidan i, så det är inte kritiskt, men jag blir bara så frustrerad eftersom jag gärna vill förstå varför den beter sig som den gör och inte bara acceptera skillnaden i utseendet

Tyvärr medger den tekniska lösningen inte att använda något annat än input- eller buttonelement (.net och webforms...) om man inte vill vara beroende av JS, tack för svaret iaf!

Visa signatur

/Mvh Stefan

Permalänk
Medlem
Skrivet av Guru Meditation:

Tyvärr medger den tekniska lösningen inte att använda något annat än input- eller buttonelement (.net och webforms...) om man inte vill vara beroende av JS, tack för svaret iaf!

Det går ju att med JS ersätta denna <button> till en <a> och göra submit på click istället. För klienter som har avaktiverat JS kommer det här visuella felet att uppstå, men inte för de allra flesta. Lägg bara till taggen a i din CSS-rad: button, a { ... }

Edit: Om man vill säkerställa att din webbplats inte kräver JS för att fungera är följande bra lästips:
Client Script in Web Forms Pages
ASP.NET Server Controls and Browser Capabilities

Permalänk
Medlem

eller så kan du du skriva en regel för safari direkt i din css

så kallat targeting
@media screen and (-webkit-min-device-pixel-ratio:0){
button {
width: auto;
overflow: visible;
cursor: pointer;
padding: 0;
margin: 0;
border: none;
display: block;
font-size: 14px;
line-height: 14px;
background-color: red;
color: white;
float: left;
}
}

Visa signatur

Mobo, Prime Z390-A - CPU, I7 9700K @ Stock (so far), Be Quiet Dark rock 4 - MINNE, 16gb Vengance RGB 3200Mhz - GPU, RTX 2070 Gaming OC - HDD, 2 x Samsung EVO 860 (500gb)