4

幅が 200px であることをインライン CSS で指定するテキスト ボックスがあります。

<input type="text" name="xxx" value="yyy" style="width: 200px;" />

IE 10 では以下のように表示されます (テキストが切り取られている場所を強調表示)

ここに画像の説明を入力

そのテキストボックスがフォーカスを受け取るとすぐに、すべてのテキストが表示されます (その後、再びフォーカスを失った後、テキストは表示されたままになります) 。

誰かが同じ問題を抱えていて、これを修正することができますか?

4

3 に答える 3

5

これは ie10 の「クリア ボタン」と関係があると 99% 確信しています。

ie10 でテキストボックスがフォーカスされると、テキストをクリアできる小さな「x」が右側に表示されます。

これをスタイルシートに追加することで x を削除できます

::-ms-clear {
display: none;
}

クリアボタンのスタイルに問題がある可能性があります。上で貼り付けたスタイルを追加して、問題が解決するかどうかを確認することをお勧めします。

これは、あなたの問題をちょっと再現するフィドルです（CSSが悪い）

http://jsfiddle.net/qDTWw/3/

これが修正のフィドルです

http://jsfiddle.net/qDTWw/4/

于 2013-10-10T17:47:23.860 に答える
4

私はie10のパスワードボックスで同じことをしています。この回避策は私にとってはうまくいくようです...

$('.password').blur(function () {
    //work around for ie10 clipping text
    $(this).val($(this).val());
});
于 2013-10-30T01:19:18.907 に答える
2

*私は解決していないため、これは本当の「回答」ではありませんが、コメントにうまく収まらない追加情報をここに投稿しています. 私はこれと同じ問題を抱えており、これが他の誰かがそれを理解するのに役立つことを願っています.

この jsfiddle は、問題を再現する 1 つの方法です: http://jsfiddle.net/tj_vantoll/2NGEQ/2/

どうやら、これは Microsoft に報告されたようです: https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-cliped-when-a-font-size-is-applied-to-a-親要素#詳細

Microsoft の誰かからの返信への参照がここにあります: http://bugs.jqueryui.com/ticket/8677 Tony Ross (Microsoft) から:この問題は、ユーザーがコントロールを操作すると自動的に解決されますが、次のリリースまでレーダーに留まるようにします. コードベースの回避策については、必要に応じて入力要素自体を突いて更新する方法がいくつかあります (値を更新する、インラインで要素の幅を変更する、最初にインラインで幅を割り当てる、等）.....

私がしなければならないので、jsfiddleからコードを投稿します:

 <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by tj_vantoll</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
  <style type='text/css'>
    input { width: 150px; }
form.on input { font-size: 1em; }
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('button').on('click', function(event) {
   $('form').addClass('on');
});
});//]]>
</script>
</head>
<body>
  <form>
    <input type="text" value="Whatever" />
</form>
<button>Break It</button>  
</body>
</html
于 2013-10-10T17:42:28.177 に答える