입력 상자가 Ipad에서 다르게 보이지만 크롬에서는 보이지 않는 이유

Question

입력란을 제외하고 제대로 작동하는 사이트가 있고 그 옆에 제출 단추가 있습니다. iPad에서 제대로 표시되지 않습니다. 입력 상자의 높이가 전송 버튼보다 약간 더 많아서 이상하게 보입니다.

나는 개인적으로 iPad가 사파리 - 모바일이며 다른 뷰포트 (1024px) 등을 가지고 있다고 생각하지만 Chrome과 동일한 웹킷 모양을 렌더링합니다. 그렇다면 입력 상자가 iPad에서 왜 다른지 보여주는 이유는 무엇입니까? 이 iPad에서 어떻게 보이는지

을 그리고 여기에 있습니다 : :

하는 HTML 부분은 여기 간다

---

는 내 바탕 화면에 구글 크롬의 모습입니다 간단하게 :

,210

그리고 같은에 대한 CSS는 : 당신이 볼 수 있듯이

#search-form { 
    overflow: auto; 
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1); 
    margin-bottom: 26px; 
} 

input#Search { 
    -webkit-appearance: none; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
} 

.defaultText { 
    width: 88%; 
    padding-left: 4px; 
    height: 29px; 
    float: left; 
    background-color: #f7f7f7; 
    border-right: 0px solid #666; 
    border-bottom: 1px solid #666; 
    border-color: #999; 
    margin-right: -33px; 
} 

.defaultTextActive { 
    color: #999; 
    font-style: italic; 
    font-size: 15px; 
    font-weight: normal; 
} 

.search_btn { 
    font-size: 13px; 
    font-weight: bold; 
    height: 34px; 
    cursor: pointer; 
    float: right; 
    margin: 0; 
    width: 33px; 
    background: url("../images/search.jpg") no-repeat; 
    text-indent: -99999px; 
    border: 1px solid #999; 
    border-top: 2px solid #000; 
    margin-top: 0px; 
    margin-right: 1px; 
} 

은 입력의 경계 효과도 아이 패드에서 제대로 렌더링되지 않습니다. 누구든지 그것에 대해 어떤 단서가 있습니까?

Answer 1

기본 스타일을 제거하려면 -webkit-appearance를 사용해보십시오.

확인이 문제 : iOS forces rounded corners and glare on inputs https://stackoverflow.com/a/14758383

Answer 2

CSS의이 조각은 당신의 텍스트 상자에서 기본 웹킷 스타일을 제거합니다 : 너무 아이폰 OS 7

input[type="text"] { 
    -webkit-appearance : none; 
    border-radius  : 0; 
} 

작품.