我正在为高尔夫计算器创建一个 webApp,在我的 iPod 上进行测试时,似乎文本和 div 标签不像在 Chrome 上那样居中。然后是 Inputs 和 Select 标签。这是我的 html/css
<header>
<h1>Simple Handicap Calculator</h1>
</header>
<section>
<input id="score1" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score2" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score3" class="score" type="tel" value="Score" onfocus="this.value = '';">
<div class="rating">Course</div>
<select id="courseRating" class="select"></select>
<div class="rating">Slope</div>
<select id="slopeRating" class="select"></select>
<div class="calculateButton" onclick="HandicapCalculator.CalculateHandicap();">Tap</div>
<div id="handicap">Handicap</div>
<div id="curtain"></div>
</section>
然后我的CSS:
html {
font-size: 1em;
background: #825534;
color: #E6D4A7;
font-family: JosefinSlab;
}
header {
float: left;
width: 100%;
font-size: 32px;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px 1px #36362C;
}
section {
float: left;
width: 100%;
}
section .score {
height: 38px;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
text-align: center;
font-size: 1.5em;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
border: none;
-webkit-appearance: none;
-webkit-box-sizing: content-box;
}
section .rating {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #36362C;
text-align: center;
-webkit-appearance: none;
}
section .select {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
font-size: 1.5em;
text-indent: 40%;
border: none;
-webkit-box-sizing: content-box;
}
section .calculateButton {
float: left;
height: 50px;
width: 50%;
margin: 8px 25% 0 25%;
background: #A8AD80;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
section #curtain {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
}
section #handicap {
float: left;
height: 50px;
width: 70%;
margin: 8px 15% 0 15%;
background: #E6D4A7;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
如果还有什么我可以提供的,请告诉我。如需实时测试版本,请访问 ragstudio.com/handicapCalculator