需求是一個簡單的搜索框：包括一個輸入框和按鈕，在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端两个内联块元素无法上下对齐的问题？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。