title: CSS3 button renders differently on web vs iOS
body: <p>I found some code for generating CSS3 buttons which I'm using on my site. The buttons look great when viewed in the browser. However, on the mobile web version of my site (which uses the same styles) the buttons render differently. Even stranger, if I use Safari and view my site with User Agent of iPhone the buttons look as they should. However in iOS Simulator they don't. Can someone help me understand why? </p>
  
  <p>Here's the code I'm using:</p>
  
  <pre><code>.button, #button .button, li.button .button { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    vertical-align: baseline; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 1.5em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  }
  
  .orange, #button .orange { 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
  }
  </code></pre>
  
  <p>Here is how it renders in the browser:</p>
  
  <p><img src="https://i.stack.imgur.com/XCsD4.png" alt="enter image description here"></p>
  
  <p>And here is how it renders on an iPhone:</p>
  
  <p><img src="https://i.stack.imgur.com/RUWbd.png" alt="enter image description here"></p>