Polsterung im inneren textbox wird nicht richtig angezeigt im internet explorer

Ich habe eine Seite bei ---link entfernt-jetzt - - -

Können Sie es im FF und IE (ich habe IE 9). In ihm können Sie sehen, dass das suchen-Feld oben rechts ein padding (left:32px und rechts:72px). Die Polsterung korrekt funktioniert in FF und Chrome, aber nicht im IE.

Was kann der mögliche Grund.

Search box code- 

<form action="">
    <input type="text" name="search" id="search" />
    <input type="submit" id="button" value="" />
    </form>

CSS: 

#search {
    background:url(images/searchlens.jpg) no-repeat 0 0;
    float:right;
    width: 286px;
    height:40px;
    border:none;
    padding-left: 32px;
    padding-right:72px; 
}
InformationsquelleAutor Puneet Saini | 2012-01-26
  1. 0

    Ich denke du meinst, dass, wenn genügend text in das Feld, rechts-Polsterung ist nicht angewendet, und wenn mehr text eingegeben wird, wird auch padding auf der linken Seite verschwindet. Dies kann beobachtet werden im folgenden an einem einfachen Dokument:

    <!doctype html>
<title>input padding</title>
<style>
#search {
    padding-left: 32px;
    padding-right: 72px;
    width: 286px;
}
</style>
<input id=search value=
"Hello cruel world of Internet Explorer, why don't I get padded as specified?">

    Wenn mehr Zeichen eingegeben werden, in der box, auch das padding auf der linken Seite Weg geht.

    Scheint es nicht zu sein, irgendeine gute Lösung, um diese kuriosität. In den Antworten auf die Frage Polsterung eine Texteingabe im IE... möglich?, verschiedene Korrekturen vorgeschlagen wurden, und Sie vermutlich helfen, in einigen Fällen, aber nicht in meinen tests.

    Also ich würde vorschlagen, umgehen das problem, indem er die input - element in einem div element und der Einstellung von hintergrund und Polsterung auf der div element, so dass die input box im inneren ist es meist unstyled und alle scrollen erfolgt innerhalb es.

    • Ok, ich werde dieses versuchen und post ein update
    • Ich habe versucht den link in deine Antwort, aber ich konnte nicht bekommen, dass der code zu arbeiten, nachdem versucht alle hacks in den Antworten, aber Leute berichtet, dass es für Sie gearbeitet...
    InformationsquelleAutor Jukka K. Korpela
Schreibe einen Kommentar