Белый пробел в HTML-кнопке, которую нельзя удалить и отображается только на iPhone?

Question

Вот как это выглядит (есть белое пространство справа от кнопки):

И это выход CSS в WebKit браузер:

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

Трудно сказать, поскольку вы не указали CSS для DIV#header_search и input#searchbox. Но исходя из ширины и цвета границ, я думаю, что свободное пространство не находится в правой части input#search-button, а скорее внутри самого входа.

Кроме того, может быть какой-то накладной: я думаю, мы можем видеть правую границу #searchbox за #search-button. Это предназначено? Если нет, это может быть важным ключом.

Браузеры могут интерпретировать HTML и CSS по-разному. Я ничего о поведении iPhone не знаю, но вы можете проверить общие вопросы отображения/совместимости:

• Try без возврата каретки или любого пустого пространства в вашем HTML-код между тегами. Браузеры могут показывать тогда, вставляя неожиданные белые пробелы, вертикально и/или горизонтально.

• Недвижимость float:left кажется ненужным с position:absolute. Вы можете удалить его, это свойство может легко вызвать проблемы с позиционированием и размером.

• Возможно, браузер iPhone отображает вводимые вводом ввода-вывода по-разному. Значение должно отображаться на кнопке, и, возможно, здесь работает text-indent:-9999px. Это может потребовать дополнительных настроек. Если это ваша проблема, и вы не можете решить ее с помощью чистого CSS, попробуйте поместить кнопку по умолчанию где-то, ее не видно, и замените input[type="submit"] на любой другой тег, который будет отображаться правильно во всех браузерах.

• Браузеры вычисляют размеры элементов совершенно по-разному. Они могут включать или не включать такие вещи, как отступы, границы, границы. Я предлагаю вам проверить ширину элементов и смещение слева, попробовав разные настройки.

Я не думаю, что вы все еще ищете решение. Скажите, пожалуйста, если вы выяснили, откуда возникла проблема и как ее решить.