위치 폭 : iPad에서 절대 입력 태그가 올바르지 않음

Question

div에 입력 요소를 배치하려고합니다. 크기와 위치를 절대적으로 지정해야하는 배경이 있습니다. 그것은 PC에서 잘 작동하지만 완전히 다른 값을 사용하지 않고 iPad에서 바로 얻을 수 없습니다.

<div id="container"> 
    <input class="input-pc" type="text"/> 
</div> 
<br/> 
<div id="container"> 
    <input class="input-ipad" type="text"/> 
</div> 

CSS는 :

PC

성상 아이 패드에

html로에

성상

#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에서 작동하는 두 가지 스타일.

2 개의 입력란을 정확하게 두 플랫폼에 포함시킬 수있는 방법이 있습니까?

Answer 1

필자는 이것을 테스트하지는 않았지만, 상대적/절대 위치 지정을 사용하지 않기 때문에 두 장치 모두에서 작동해야한다고 생각합니다. 대신, 나는 간단한 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/

희망을!