Удалить 3 пикселя в текстовом поле iOS/WebKit

Я пытаюсь создать textarea, который выглядит точно как div.

Однако на iOS есть 3 пикселя, которые откуда-то не могут быть удалены.

Здесь мой код:

<!doctype html>
<title>Textarea test</title>
<style>
textarea, div
{
  background: yellow;
  font: 13px arial;
  border: 0;
  padding: 0;
  border-radius: 0;
  margin: 0;

  -webkit-appearance: none;
}
</style>
<div>test</div>
<hr>
<textarea>test</textarea>

Это отображается так (я увеличил масштаб):

Как показывает скриншот, там есть 3 пикселя перед текстом, от которого я хочу избавиться. Насколько я вижу, это не поле/дополнение или граница.

Это происходит на моем iPhone и iPad, работающем под управлением iOS 4.3. И быть ясным; эти 3 дополнительных пикселя не отображаются в Safari/Firefox/Chrome на моем рабочем столе. Или мой брат Windows Phone, если на то пошло.

EDIT 2011-08-10:
Я только что проверил это на <input type=text>, и появляется то же самое "дополнение", за исключением того, что это 1 пиксель вместо 3.

Ответ 1

Хорошо... Извините... Здесь мы идем... Официально неофициальный ответ...

Вы не можете избавиться от него.

По-видимому, это "ошибка" с мобильным сафари на входах. См:

Вы можете, однако, знать, что отступ делает это

textarea {
  text-indent:-3px;
}

Это не очень хорошее решение, но оно делает то, что вам нужно.

Edit Забыл упомянуть, протестирован с iOS Simulator. Вы можете попробовать на своем телефоне.

Еще один момент: это также предполагает, что вы обслуживаете css исключительно для мобильного сафари, особенно для iPhone. Более старый способ сделать это:

/* Main CSS here */

/* iPhone CSS */
@media screen and (max-device-width: 480px){
  /* iPhone only CSS here */
  textarea {
    text-indent: -3px;
  }
}

Изменить снова У меня слишком много удовольствия с этим... Вы также можете использовать отдельные таблицы стилей с этими объявлениями:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Изменить. По-видимому, кто-то купил Android;)

<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
  document.write('<link rel="stylesheet" href="iphone.css" type="text/css" />');
} else if (navigator.userAgent.indexOf('Android') != -1) {
  document.write('<link rel="stylesheet" href="android.css" type="text/css" />');
} else {
  document.write('<link rel="stylesheet" href="desktop.css" type="text/css" />');
}
</script>

Лично у меня нет проблем с текстовыми записями, имеющими некоторый внутренний отступ. Он очищает его от края области и делает его более читаемым. Однако я считаю, что браузер должен поддерживать спецификацию. Итак, вот обновление для дифференциации Android и iPhone. Получайте удовольствие!

Ответ 2

Вот быстрое решение JavaScript (основанное на подходе stslavik), которое сохраняет некоторые строки кода и тесты для iPad и iPod.

Если вы используете jQuery:

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
  $('textarea').css('text-indent', '-3px');
}

Если вы хотите использовать стандартный JS:

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
  textareas = document.getElementsByTagName('textarea');
  for(i = 0; i < textareas.length; i++){
    textareas[i].style['text-indent'] = '-3px';
  }
}

Ответ 3

Одна работа заключается в том, чтобы использовать div, который вы устанавливаете как редактируемое.

HTML

<div class="editable" contenteditable="true">
    Editable text...
</div>

JavaScript:

<div onClick="this.contentEditable='true';">
    This is a test
</div>

JQuery

 $(this).prop('contentEditable',true);

Ответ 4

text-intend не работает при наличии нескольких строк (как упоминал Джонатан в комментарии при принятом ответе).

Итак, это сработало для меня на iPhone 6:

textarea {
    margin-left: -3px;
    &::placeholder {
        padding-left: 3px;
    }
}

Ответ 5

не может проверить его прямо сейчас, но попробуйте

float: left;

и/или

border-width: 0;

и/или

padding: -3px;

EDIT - еще одна попытка:

-webkit-padding-start: 0px;
-webkit-margin-start: 0px;
text-indent: 0px;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
outline-offset: 0px;

Для справки, включая информацию о совместимости, см. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

Ответ 6

Итак, чистое решение css, которое опирается на уже упомянутые. Однако text-indent делает это только для меня, поскольку placeholder не выполняется. Если вы добавите одну дополнительную строку, это поможет reset добавить дополнительный отступ для устройств iOS. Вероятно, придется делать некоторые другие магии, чтобы разрешить другим сенсорным устройствам ширины выше 480 пикселей.

@media only screen and (max-device-width: 480px) {
   textarea {text-indent: -3px;}
   textarea::-webkit-input-placeholder { text-indent: 0px; }
}