[CSS] Knepig fråga om knapp i Safari

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.

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

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;
}
}