在iOS / WebKit textarea中删除3个像素 [英] Remove 3 pixels in iOS/WebKit textarea
问题描述
我正在尝试创建一个 textarea ，它看起来与 div 完全相同。
I'm trying to create a textarea that looks exactly like a div.
然而，在iOS上有3个像素来自我无法移除的地方。
However, on iOS there's 3 pixels coming from somewhere that I can't remove.
这是我的代码：
<!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>
这样渲染（我放大了）：
This is rendered like so (I've zoomed in):
截图显示，在我要删除的文本之前有3个像素。据我所知，它不是边距/填充或边框。
As the screenshot shows, there's 3 pixels before the text that I want to get rid of. As far as I can see it's not the margin/padding or border.
这种情况发生在我的iPhone和iPad上，都运行iOS 4.3。并且要清楚;我的桌面上的Safari / Firefox / Chrome上没有显示这3个额外的像素。或者我兄弟的Windows Phone，就此而言。
This happens on my iPhone and iPad, both running iOS 4.3. And to be clear; those 3 extra pixels don't show up on Safari/Firefox/Chrome on my desktop. Or my brother's Windows Phone, for that matter.
编辑2011-08-10：
我只是在< input type = text> 上对此进行了测试，并显示相同的填充内容，但它只有1个像素而不是3个。
EDIT 2011-08-10:
I've just tested this on a <input type=text> and the same "padding" thing appears, except that it's 1 pixel instead of 3.
推荐答案
好的......对不起......我们走了......官方的非正式回答是......
Okay... Sorry... Here we go... The officially unofficial answer is...
你无法摆脱它。
显然这是一个关于输入移动游猎的bug。请参阅：
Apparently this is a "bug" with mobile safari on inputs. See:
- <input type="submit"> padding bug on Safari mobile?
- iPhone <button> padding unchangeable?
但是，您可以知道缩进这样做
You can, however, knowing the indent do this
textarea {
text-indent:-3px;
}
这不是一个漂亮的解决方案，但它能满足您的需求。
It's not a pretty solution, but it does what you need.
编辑
忘记提及，使用iOS模拟器测试。你可以试试自己的手机。
Edit Forgot to mention, tested with iOS Simulator. You might try on your phone itself.
另一点：这也假设你只为移动游猎提供css，特别是iPhone。更老的方法是：
Another point: This also assumes that you're serving up css solely for mobile safari, specifically for the iPhone. An older way of doing this is:
/* Main CSS here */
/* iPhone CSS */
@media screen and (max-device-width: 480px){
/* iPhone only CSS here */
textarea {
text-indent: -3px;
}
}
再次编辑
我对此有太多的乐趣......你也可以使用单独的样式表来表示这些声明：
Edit Again I'm having way too much fun with this... You can also use separate stylesheets with these declarations:
<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;）
Edit Because apparently somebody bought an 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的更新。玩得开心！
Personally, I don't really have a problem with text-entries having some internal indentation. It clears it from the area's edge and makes it more readable. I do, however, believe that a browser should support the spec. So here's an update for differentiating between android and iPhone. Have fun!
这篇关于在iOS / WebKit textarea中删除3个像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
