У меня есть сайт, который работает правильно, за исключением поля ввода и кнопки отправки рядом с ним. Они плохо отображаются на iPad. Высота окна ввода немного больше, чем кнопка отправки, что делает ее странной.Почему поле ввода отображается на Ipad, но не на chrome
Я лично думаю, что iPad является сафари-мобильным, имеет разные видовые экраны (1024px) и т. Д., Но делает тот же внешний вид веб-кита, что и в Chrome. Тогда почему поле ввода отличается от iPad?
Вот как это выглядит в Google Chrome на моем рабочем столе:
А вот как это выглядит на IPad:
HTML, часть идет просто как:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
И 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;
}
Как вы можете видеть, пограничные эффекты ввода также не визуализироваться в IPad. Кто-нибудь знает об этом?
Я сделал это - и это помогло, но поле ввода по-прежнему выше на ios, чем в браузере ... что дает? – fideldonson