2017-02-06 9 views
0

CSSは:(iPhoneのiOS 10)

など、私がパディングを含むdiv要素内のテキスト、など 正確同じに見えるようにテキストエリア内のテキストを必要とする

テキストエリア内の余分な非パディングスペースを取り除きます

下のhtmlは自分のパソコン(Windows Chrome)で動作します。しかし、実際のiPhone(Safari/Chrome、OS 10)で見ると、左パディング(左パディングは0)のような余分なスペースがテキストエリア内に追加されます。このスペースをどうやって取り除くのですか?

(私はiOSの9でこの問題を持っていたとは思わない)

<style> 
.my_area{ 
    margin: 0; 
    padding: 0; 
    outline: 0; 
    border: 0; 
    box-sizing: border-box; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    font-family: arial; 
    font-size:17px; 
    line-height:26px; 
    width:200px; 
    overflow:hidden; 
    background:yellow; 
    border:1px solid black; 
    border-radius:0; 
} 
</style> 

<textarea class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</textarea> 
<br/> 
<div class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</div> 

編集:私は、適切な解像度でページを表示していますので、私は、ヘッダー内

width=device-width, initial-scale=1.0 

を使用モバイル用。

+0

これは同じ問題であるようです。http://stackoverflow.com/questions/21935912/shadow-dom-on-textarea-in-ios-forces-padding#21948469それを修正するために、答えはあなたができないように見えます。 –

答えて

0

コメントのように、解決策があるようには見えません。

iOSの場合、3pxの左と右のパッドが要素に追加されました。これは、iPadとiPhoneの両方で適切な額に見えました。

関連する問題