刪除iOS/WebKit textarea中的3個像素

我正在嘗試創建一個textarea，看起來完全像div。刪除iOS/WebKit textarea中的3個像素

但是，在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。並且要清楚;這3個額外的像素不會顯示在我桌面上的Safari/Firefox/Chrome上。或者是我兄弟的Windows Phone。

編輯2011-08-10：
我剛剛測試了這個在<input type=text>並出現相同的「填充」的東西，但它是1個像素，而不是3

來源

2011-07-31 Tom Lokhorst

您是否嘗試過填充左= 0，填充 - .. = 0，等等？這是iOS/WebKit的問題還是其他平臺也會出現這種情況？ – lm2s

@ lm2s是的，填充是0（請參閱代碼）。我沒有任何其他移動設備可以測試，但在我的桌面上，Safari，Firefox或Chrome上沒有額外的空間。 –

好吧......對不起......在這裏，我們去...正式非官方的答案是...

你不能擺脫它。

顯然這是一個移動Safari瀏覽器的輸入「bug」。請參閱：

你可以，但是，知道縮進做到這一點

textarea { 
    text-indent:-3px; 
}

這不是一個漂亮的解決方案，但它確實你需要什麼。

編輯忘了提及，用iOS模擬器測試過。你可以嘗試你的手機本身。

另一點：這也假設你只爲移動Safari瀏覽器提供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的更新。玩的開心！

來源

2011-08-11 16:51:21 stslavik

恐怕我會有使用'text-indent：-3px;'選項。並只爲iOS服務。 –

這不是一個可怕的選擇：類似於爲IE7/8/9提供特定樣式。這只是不漂亮。無論如何，直到移動Safari瀏覽器開始渲染更準確。 – stslavik

這很好，除非你想讓它在Android上工作。 – defrex

-1

無法測試它的權利，但嘗試

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;

對於包括兼容性信息的參考看到http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

來源

2011-08-04 20:54:01 Yahia

對不起，遲到的迴應。但不幸的是，這些工作都沒有。 –

請參閱我上面的修改。 – Yahia

這是一個很好的嘗試，但沒有骰子。 3個像素仍然存在。 –

下面是一個快速的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'; 
    } 
}

來源

2014-03-18 15:34:20 saschoar

這是我使用的解決方案，效果很好。我使用'margin-left：-3px'而不是'text-indent'，但是同樣的想法，謝謝。 – skcin7

-1

所以，這是建立在已經提到的一個純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; } 
}

來源

2015-07-24 02:43:48

一個解決方法是使用您設置爲可編輯的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);

來源

2015-09-16 02:12:11

text-intend做當有多條線路時，他不會工作，（正如喬納森在接受的答案中的評論中所提到的那樣）。

所以，這個工作對我來說在iPhone上6：

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

來源

2017-05-05 10:59:46

刪除iOS/WebKit textarea中的3個像素

回答

相關問題