html内联框上下重叠,如何解决IOS端两个内联块元素无法上下对齐的问题？

需求是一个简单的搜索框：包括一个输入框和按钮，在PC端宽度较短且固定，在移动端独占一行

PC端和安卓移动端都没有问题，但是在IOS端上下没有对齐，相差1px

IOS端：

安卓端：

Html代码：

Css样式：/* 顶部搜索栏 */

#nav-search input[type='text'] {

box-sizing: border-box;

display: inline-block;

height: 30px;

width: 170px;

/* line-height: 30px; */

padding-left: 5px;

margin-left: 100px;

border:1px #005164 solid;

}

#nav-search input[type='submit'] {

box-sizing: border-box;

display: inline-block;

height: 30px;

width: 50px;

/* line-height: 30px; */

background-color: #005164;

color: white;

border:1px #005164 solid;

/* border:none; */

}

@media screen and (max-width:500px){

#nav-search input[type='text'] {

box-sizing: border-box;

width: 80%;

margin: 0 0 10px;

-webkit-appearance: none;

border-radius: 0;~~~~

}

#nav-search input[type='submit'] {

box-sizing: border-box;

width: 18%;

margin: 0 0 10px;

-webkit-appearance: none;

border-radius: 0;

}

/* #nav-search::before {

display: block;

content: "";

height: 0;

margin: 0;

} */

}

我尝试的解决方法，都没有用：

1.尝试为两个元素添加box-sizing: border-box;属性

2.尝试为提交按钮input[type='submit']也添加一个一样的边框

最后的解决方法：

使用js检测到当前为IOS设备时，设置提交按钮底部内边距为1px：$('#nav-search-submit').css('padding-bottom','1px')

请问有没有更好的解决方案？

html内联框上下重叠,如何解决IOS端两个内联块元素无法上下对齐的问题？相关推荐

html百度转到顶部 fixed,科技常识：完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题...
今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题的相关资料 ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
微信小程序解决ios端时间格式兼容的问题
微信小程序获取当时时间new Date时,会在ios真机上出现问题,具体表现为时间格式会报错并显示出NaN.这个bug并不会在模拟器和安卓系统出现,只会在ios系统上出现,具体原因是ios不支持符号 ...
解决IOS端微信小程序本地开发环境和线上版本的时间显示不一样，线上和体验版本时间相关的计算为NAN。
废话不多说,先看下图,这是线上版本的小程序,ios端无法显示时间相关计算后的数字,要么出现NAN或者null: 然后我将ios手机中的微信小程序,而且是开发版的 "打开调试" 打 ...
解决ios端返回上一个页面不刷新页面的问题
javascript返回上一个页面也许你会立马想到几种方案: 1.<a href="javascript:history.go(-1)">返回上一页</a> ...
H5解决IOS端无法使用摇一摇功能，解决监听devicemotion失效问题
IOS端无法使用摇一摇功能,主要方法是对devicemotion的监听,devicemotion如果不清楚是做什么的,可以找下度娘. DeviceMotion 到底是何物? 在 window 对象中存 ...
html两个文本框怎么重叠,ppt文本框字体重叠怎么解决
我们在使用ppt的过程中,有时会出现文字重叠的问题,对于这样的问题,我们应该如何解决呢?其实方法很简单,下面就让学习啦小编告诉你如何解决ppt文字重叠问题. ppt文字重叠问题的解决方法当输入文字是 ...
微信开发：解决IOS端下面的点击延迟问题
最近在开发微信端时,发现在Android下面,click事件非常的流畅,而在IOS下却有一定的延迟.查了查资料,发现早在2007年,苹果为了解决在Iphone这种小屏幕浏览器站点的问题,就设置了300 ...
ios 内购未能连接上苹果服务器,ios - 模拟器如何调试内购内容,无法连接iTunes Store...
PHPzhong2017-04-18 09:16:422楼请参照此checkList 1.您是否在iOS Dev Center中打开了对应应用AppID的In-App Purchases功能?登陆i ...

html内联框上下重叠,如何解决IOS端两个内联块元素无法上下对齐的问题？

html内联框上下重叠,如何解决IOS端两个内联块元素无法上下对齐的问题？相关推荐

最新文章

热门文章