在iOS/WebKit textarea中删除3个像素
Tom*_*rst 24 webkit textarea padding ios
我正在尝试创建一个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.
sts*_*vik 12
好的......对不起......我们走了......官方非官方的回答是......
你无法摆脱它.
显然这是一个关于输入移动游猎的"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的更新.玩得开心!
- `text-indent`仅适用于第一行文本.这在`<input>`中工作正常,但在带有多行文本的`<textarea>`中,只有第一行向左移动.在那种情况下,你应该使用类似`margin-left:-3px`的东西. (8认同)
| 归档时间： |
|
| 查看次数： |
6067 次 |
| 最近记录： |