我正在尝试创建一个看起来完全像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。并且要清楚;我的桌面上的Safari / Firefox / Chrome上没有显示这3个额外的像素。或者我兄弟的Windows Phone，就此而言。
编辑2011-08-10：
我刚刚在<input type=text>上测试了它，并且出现了相同的“填充”事物，除了它是1像素而不是3像素。
好的......对不起......我们走了......官方非正式的回答是......
你无法摆脱它。
显然这是一个关于输入移动游猎的“bug”。看到：
但是，您可以知道缩进这样做
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的更新。玩得开心！
这是一个快速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';
}
}
一种解决方法是使用您设置为可编辑的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);
当有多行时，text-intend不起作用（正如Jonathan在接受的答案中的评论中提到的那样）。
所以，这在iPhone 6上对我有用：
textarea {
margin-left: -3px;
&::placeholder {
padding-left: 3px;
}
}
基于之前的答案，似乎解决这个问题的最佳方法是在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;
}
所以，一个纯粹的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; }
}
现在无法测试，但试试
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;