Question

我正在尝试使用手机间隙创建一个简单的应用程序，但似乎css没有按照预期在IOS中的手机间隙中呈现按钮在浏览器中，按钮按预期显示，但在phonegap中，样式显示不同。

<!DOCTYPE html>
<html>
<head>
    <title>Counter V 1.0</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" type="text/css" href="css/counter.css">
</head>
<body>
<h1><a id="clicks">0</a></h1>           
<div class="half">
    <input type="submit" value="+" class="increase-button" onClick="increase()">    
    <input type="submit" value="-" class="decrease-button" onClick="decrease()">                            
</div>   
 <div class="half">
 <p><input type="submit" value="Reset" class="reset-button" onClick="reset()"></p>          
</div>
</body>
</html>

![enter image description here][1]Counter.css
.increase-button{
 position: relative;
 vertical-align: top;
 width: 50%;
 height: 60px;
 padding: 0;
 font-size: 40px;
 color: white;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #27ae60;
 border: 0; 
 }

.decrease-button{
 position: relative;
 vertical-align: top;
 width: 50%;
 height: 60px;
 padding: 0;
 font-size: 22px;
 color: white;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #e74c3c;
 border: 0;
 }

.reset-button{
 position: relative;
 vertical-align: top;
 width: 50%;
 height: 60px;
 padding: 0;
 font-size: 22px;
 color: white;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #3498db;
 border: 0;
 }

Answer 1

我试图复制你在这里提到的内容。我能够得到完美的结果。对于同样的我已经附加图像。这是你期待的吗？

Your output

您可以在here

下载该项目

编辑：

这是解决方案

将您的CSS更新为此

.increase-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 40px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border: 0;
width: 50%;
height: 60px;
color: white;
text-align: center;
-webkit-appearance: none;
border-radius: 0px !important;
}

.decrease-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #e74c3c;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;

}

.reset-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;

}

原因是uiwebview正在添加额外的-webkit-appearance：pushbutton和border-radius：20px，我已经在最后两行css中覆盖了。

希望这有帮助

phonegap CSS无法在IOS中正确呈现

1 个答案: