html - 位置宽度:iPad上的绝对输入标签不正确

我试图将输入元素定位在具有背景的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 - 位置宽度:iPad上的绝对输入标签不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24249934/