Question

我正在尝试创建一个看起来与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 extra pixels

如屏幕截图所示，在我要删除的文本之前有3个像素。据我所知，它不是边距/填充或边界。

这种情况发生在我的iPhone和iPad上，两者都运行iOS 4.3。并且要清楚;我的桌面上的Safari / Firefox / Chrome上没有显示这3个额外的像素。或者我兄弟的Windows Phone，就此而言。

编辑2011-08-10：
我刚刚在<input type=text>上对此进行了测试，并且出现了相同的“填充”内容，除了它是1个像素而不是3个。

Answer 1

好的......对不起......我们走了......官方的非正式回答是......

你无法摆脱它。

显然，这是一个关于输入移动游猎的“错误”。参见：

但是，您可以知道缩进这样做

textarea {
  text-indent:-3px;
}

这不是一个漂亮的解决方案，但它可以满足您的需求。

修改忘了提，用iOS模拟器测试过。您可以试试自己的手机。

另一点：这也假设您只为移动游猎提供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的更新。玩得开心！

Answer 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';
  }
}

Answer 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);

Answer 4

当有多行时，

text-intend不起作用（正如Jonathan在接受的答案中的评论中提到的那样）。

所以，这在iPhone 6上对我有用：

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

Answer 5

根据先前的回答，看来解决此问题的最佳方法是在textarea元素中添加margin-left: -3px。我们可以使用一些CSS tackling particularly iOS Safari来做到这一点，而这些东西在Android上不会弄乱

textarea @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    margin-left: -3px;
}
textarea::placeholder @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    text-indent: -3px;
}

Answer 6

所以，一个基于已经提到的纯css解决方案。但是text-indent对我来说只做了很多，因为placeholder没有受到影响。如果添加一个额外的行，则有助于重置iOS设备的额外缩进。可能还需要做一些其他的巫术，以允许宽度超过480px的其他触控设备。

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

Answer 7

目前无法测试，但请尝试

float: left;

和/或

border-width: 0;

和/或

padding: -3px;

编辑 - 另一次尝试：

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

有关兼容性信息的参考，请参阅https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

在iOS / WebKit textarea中删除3个像素

7 个答案: