android - iPhone 提交按钮未显示正确的 CSS 装饰

Question

我有一个移动网络应用程序，它有一个按钮栏，使用带有扁平圆形端盖的方形扁平按钮。有些按钮是链接，有些是提交按钮，它们的设计看起来完全相同。一切在 Android 设备上看起来都很完美，但某些 CSS 在 iPhone (iOS7) 上似乎被忽略，显示为带圆 Angular 的 3-D。我使用以下类设计了按钮:

.submit_button_green input {
height: 26px;
width: 61px;
border: 0px solid;
font-size 14px;
color: #FFF;
background-color: #00CC33;
font-weight: bold;
margin-top:-4;
text-shadow: 0px 2px 2px #333;
}

Answer 1

iOS 样式形成元素有很大不同，您可以通过添加 -webkit-appearance: none; 来解决大部分问题。这样的事情应该解决它:

.submit_button_green input {
  -webkit-appearance: none; /* initial fix */
  height: 26px;
  width: 61px;
  border: 0;
  font-size: 14px; /* you have a error here */
  color: #FFF;
  background-color: #00CC33;
  font-weight: bold;
  margin-top: -4px; /* and here, -4 what? px? */
  text-shadow: 0px 2px 2px #333;
  border-radius: 0; /* remove rounded corners */
}