Question

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

.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

可能的拼写错误。在font-size

之后缺少冒号

font-size: 14px;

检查

Answer 2

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 */
}

iPhone提交按钮没有显示正确的CSS装饰

2 个答案: