我正在尝试将一个输入元素定位在一个 div 中,并带有背景,我需要对其进行绝对大小和定位。它在 PC 上运行正常,但如果不使用完全不同的值,我就无法在 iPad 上正常运行。
PC 上的外观
iPad 上的外观
HTML:
<div id="container">
<input class="input-pc" type="text"/>
</div>
<br/>
<div id="container">
<input class="input-ipad" type="text"/>
</div>
CSS:
#container{
background-color: #343434;
position: relative;
width: 200px;
height: 26px;
}
.input-pc {
position: absolute;
left: 2px;
top: 2px;
width: 196px;
height: 20px;
background-color: #E8FB46;
border: none;
}
.input-ipad {
-webkit-appearance: none;
-webkit-border-radius:0;
position: absolute;
left: 2px;
top: 2px;
width: 186px;
height: 17px;
background-color: #E8FB46;
border: none;
}
Here is a fiddle这两种风格适用于 PC 和 iPad。
有没有办法让两个输入框在两个平台上都正确包含?
最佳答案
我还没有对此进行测试,但我想这应该适用于两种设备,因为我没有使用任何相对/绝对定位。相反,我只使用简单的 CSS。这是 html:
<div id="newContainer">
<input class="input" type="text"/>
</div>
这是CSS:
* {
margin:0;
padding:0;
}
div {
margin:20px 0 0 20px;
}
#newContainer{
background-color: #343434;
width: 200px;
height: 23px;
padding:1px 2px 0px 2px;
border:0;
}
.input {
width: 100%;
height: 20px;
background-color: #E8FB46;
border: none;
}
您可以在这里看到:http://jsfiddle.net/6mVHJ/2/
希望这有帮助!!!
关于html - 位置宽度 :absolute input tag not correct on iPad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24249934/