CSS Zastępowanie klas przez przeglądarkę

Witam,
Utworzyłem taki HTML:

<div class="box">
  <h1>Welcome!</h1>
   <span class="donkey"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam maximus elit non erat scelerisque condimentum. Donec at neque eros. Pellentesque libero ex, fermentum vitae ex sed, rutrum ullamcorper magna. Pellentesque sed tortor dui. Aenean posuere hendrerit libero ac vehicula. Nullam id nisi a elit commodo sagittis non ac elit.</span> <br />
<button type="submit" class="ice ">Let's check!</button>
<button role="button" class="ice">what?</button>
</div>

Oraz CSS:

.box {
margin:0px auto;
overflow: hidden;
border:1px solid #DDD;
   width:30%;
   min-width:300px;
   text-align:left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.ice {
   float:left;
   width:50%;
   text-align: center;
   border-top:1px solid #DDD;
   padding:10px;
}
.ice[type="submit"] {
   border-right:1px solid #DDD;
}
.donkey {
   line-height:150%;
}

Na komputerze wszystko ładnie działa, jednak jest problem z urządzeniami mobilnymi. Dla porównania - Tak wygląda wersja na PC:

A na telefonie:

Jak zrobić, żeby wszędzie wyświetlało się tak samo? (Głównie chodzi o przyciski ..)

Do resetownia styli używa się przeważnie:

• reset.css
  
• normalize.css
  
• reboot.css
  

Są to trzy najpopularniejsze pliki, które usuwają style (reset.css) i nadają własne (pozostałe 2), aby wszędzie wygląd był taki sam. Najnowszy jest reboot wydany wraz z Bootstrapem 4, który jest bazowany właśnie na normalize.

U ciebie mi to wygląda jednak bardziej na problem z pamięcią podręczną w telefonie, który wciąż nie przyjął nowego ostylowania buttonów.

Przerzuciłem pliki z chmury na localhost i wszystko działa.
Co do resetowania - używam tego: 

* {
   background:transparent;
   border:0;
   font-size:100%;
   margin:0;
   outline:0;
   padding:0;
}

Nie jest to co prawda całkowite, ale teraz powinno wystarczyć. Z czasem będę dodawał kolejne klasy. Dzięki za pomoc.