web-dev-qa-db-ja.com

HTML：IE：入力テキストボックスの右パディング

http://jsfiddle.net/srLQH/ に移動し、[結果]ビューの入力テキストボックスに入力します。

FF、Chrome、Safariでこれを行うと、テキストは右側の20px手前で停止します。

IE 7/8では、テキストは20px短く止まらず、入力ボックスの端まで続きます。

IEとの取引は何ですか？ IEで、他のすべてのブラウザが提供するのと同じパディング効果を得るにはどうすればよいですか？

htmlcssinternet-explorerpadding
18
SnickersAreMyFave

私はこれを解決する方法を探していました。同僚が解決策を見つけ、それをテストしたところ、完全に機能しました。つまり、padding: rightを削除し、border: 20px solid transparentを追加する必要があります。

7
Monica

私はそれを行う1つの方法を見つけましたが、それはきれいではありません。

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>​
5
Dmitry Torba

この質問は古いことは知っていますが、何度も検索した結果、うまくいく解決策を見つけました。

以下を使用して値にマージンを追加することにより、「パディング」をIEに戻すことができます。

デフォルトの入力パディング

 
 input [type = "text"] {
 padding-left：17px; 
 padding-right：17px; 
}

IE入力のパディング

 
 input [type = "text"] ::-ms-value {
 margin-left：17px; 
 margin-right：17px; 
}

ただし、このメディアクエリで実行できるIE 10+（したがって、両方を使用しない）のパディングを削除する必要があります。

 
 @ media screen and（-ms-high-contrast：active）、（-ms-high-contrast：none）{
 input [type = "text"] { 
 padding-left：0; 
 padding-right：0; 
} 
}
3
ajmccallum

Divなど、IEでパディングを行う別の要素にチャックするだけです。そうすれば、CSSスタイルシートを無効にする醜いハッキングについて心配する必要はありません。他のブラウザに迷惑をかけないように、入力からパディングを削除することを忘れないでください。これは、IEのテキストと一緒にスクロールしない背景画像をテキストボックスに与える唯一の方法でもあります。

2
Randy the Dev

これは古い質問ですが、IE10で次のように修正しました。

これを修正する方法IE-10の場合：

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

または特定の入力の場合：

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

詳細については、こちらをご覧ください： http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html

2
Chewpers

IEisは、行の最後までではなく、CSSを適用しているように見えます。つまり、パディングは、パディングの影響を受ける値ではなく、値の影響を受けます。

パディングを20pxに設定し、デフォルト値をデフォルトの幅より長くすると、最後までスクロールしてパディングを確認できます。 http://jsfiddle.net/dZyzr/

視覚的なトリックを考え出すか、IE用に別のスタイルシートを使用する必要があります。

2
Robert