削除できず、iPhoneにしか表示されないHTMLボタンの空白？

Question

これは、（検索ボタンの右側に空白がある）のように、それがどのように見えるかです：

そして、このWebKitのブラウザに出力CSS：

button { 
background: url(../images/search-button-mobile.png) no-repeat scroll left top; 
position: absolute; 
padding: 0; 
margin: 0; 
top: 5px; 
right: 0; 
width: 28px; 
height: 28px; 
} 

div#header_search input#search-button { 
background: url(../images/search-button.png) no-repeat scroll left top; 
border-color: #72A329; 
border-style: solid; 
border-width: 1px; 
float: left; 
width: 73px; 
height: 29px; 
text-indent: -9999px; 
} 
searchui.css:258 
button, input[type="button"], input[type="reset"], input[type="submit"] { 
cursor: pointer; 
-webkit-appearance: button; 
} 
searchui.css:729 
input, textarea { 
-webkit-border-radius: 0; 
} 
searchui.css:247 
button, input { 
line-height: normal; 
} 
searchui.css:237 
button, input, select, textarea { 
font-size: 100%; 
margin: 0; 
vertical-align: baseline; 
} 
searchui.css:59 
body, button, input, select, textarea { 
font-family: sans-serif; 
color: #888; 
} 
user agent stylesheet 
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ::-webkit-file-upload-button, button { 
padding: 1px 6px; 
} 
user agent stylesheet 
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ::-webkit-file-upload-button, button { 
-webkit-box-align: center; 
text-align: center; 
cursor: default; 
color: buttontext; 
padding: 2px 6px 3px; 
border: 2px outset buttonface; 
background-color: buttonface; 
box-sizing: border-box; 
} 
user agent stylesheet 
input[type="button"], input[type="submit"], input[type="reset"] { 
-webkit-appearance: push-button; 
white-space: pre; 
} 
user agent stylesheet 
input, input[type="password"], input[type="search"], isindex { 
-webkit-appearance: textfield; 
padding: 1px; 
background-color: white; 
border: 2px inset; 
-webkit-rtl-ordering: logical; 
-webkit-user-select: text; 
cursor: auto; 
} 
user agent stylesheet 
input, textarea, keygen, select, button, isindex { 
margin: 0em; 
font: -webkit-small-control; 
color: initial; 
letter-spacing: normal; 
word-spacing: normal; 
line-height: normal; 
text-transform: none; 
text-indent: 0px; 
text-shadow: none; 
display: inline-block; 
text-align: -webkit-auto; 
} 
Pseudo ::selection element 
searchui.css:73 
::selection { 
background: #FE57A1; 
color: white; 
text-shadow: none; 
} 
Inherited from div#header_search 
searchui.css:509 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
font-size: 100%; 
font: inherit; 
} 
Inherited from div#header 
searchui.css:509 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
font-size: 100%; 
font: inherit; 
} 
Inherited from div#container 
searchui.css:509 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
font-size: 100%; 
font: inherit; 
} 
Inherited from body.listTabActive.have-results 
searchui.css:531 
body { 
line-height: 1; 
} 
searchui.css:509 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
font-size: 100%; 
font: inherit; 
} 
searchui.css:59 
body, button, input, select, textarea { 
font-family: sans-serif; 
color: #888; 
} 
searchui.css:48 
body { 
font-size: 13px; 
line-height: 1.231; 
} 

HTML：

<div id="header_search"> 
<input id="searchbox" type="text" placeholder="搜尋餐廳或美食"> 
<input id="search-button" value="搜尋" name="search-button" type="submit"> 
</div> 

私はボタンの右側に空白がから来ていることはわかりません。これを修正するための提案はありますか？

Answer 1

DIV#header_searchとinput#searchboxのCSSを指定していないため、難しいと言えます。しかし、境界線の幅と色に基づいて、白いスペースはinput#search-buttonの右側ではなく、入力そ​​のものの内側にあると私は思う。

また、オーバーレイのいくつかの種類があるかもしれません。私たちは#search-button後ろ#searchboxの右境界線を見ることができると思います。これは意図されていますか？そうでない場合、これは重要な手がかりになるかもしれません。

ブラウザはHTMLとCSSを別々に解釈する可能性があります。私はiPhoneの挙動については何も知りませんが、あなたは、共通の表示/互換性の問題をチェックすることができます。

• は、キャリッジリターンやタグの間に、あなたのHTMLコード内の任意の空白なしで試してみてください。予期しない空白を縦方向および/または横方向に挿入すると、ブラウザが表示されることがあります。

• ではfloat:leftプロパティは不要です。あなたはそれを削除したいかもしれません、このプロパティは簡単に位置とサイズの問題を引き起こす可能性があります。

• iPhoneブラウザでボタンの入力方法が異なって表示される可能性があります。この値はボタンに表示されるはずです。text-indent:-9999pxのハックが正しく機能していない可能性があります。追加調整が必要な場合があります。これがあなたの問題で、純粋なCSSで解決できない場合は、デフォルトのボタンを見えない場所に置き、すべてのブラウザで正しく表示される他のタグに置き換えてください。

• ブラウザは要素サイズを全く異なる方法で計算します。パッディング、マージン、ボーダーなどが含まれる場合と含まれない場合があります。私はあなたが異なる設定を試して、要素の幅と左オフセットをチェックすることをお勧めします。

まだ解決策を探しているとは思われません。問題の原因と解決方法を見つけたら教えてください。