Border-Box zeigt keinen Text an, Padding-Box wird nicht korrekt angezeigt

Question

Ich habe derzeit ein Problem mit meiner Website und einem Chat-Service, den wir zu implementieren versuchen. Ich habe es auf ein CSS-Problem beschränkt, das mit der border-box-Eigenschaft verknüpft ist.

Das Problem existiert nur in Internet Explorer 11 auch. Die Box wird in Mozilla, Chrome und sogar älteren Versionen von IE korrekt angezeigt. Sobald der Nutzer auf der linken Seite der Website auf die Schaltfläche "Hilfe, Live-Chat" klickt, kann er seinen Eintragstext nicht sehen. Ich weiß, dass die Daten eingegeben werden und funktioniert, aber aus irgendeinem Grund zeigt das Feld nicht, was der Benutzer eingibt. Ich nahm an, dass es sich um ein Dimensionierungsproblem handelte, das korrekt war, indem die Seite ohne CSS in IE 11 angezeigt wurde. Ich kann den Eintrag in der Box sehen, aber sobald das CSS aktiviert ist, verschwindet es wieder aus dem Feld. Ich habe viele Änderungen ausprobiert, um es ohne Erfolg zum Laufen zu bringen, aber bin dann in die Padding-Box gewechselt, nur um zu sehen, ob es funktioniert. Das scheint in beiden Browsern zu funktionieren, aber in IE 11 liegt der Text am unteren Rand und sieht schlecht aus.

Gibt es einen Weg, wie ich entweder die Rahmen-Box reparieren kann, um den Text im richtigen Bereich anzuzeigen, oder gibt es eine Möglichkeit, dass ich den Text nach oben schweben kann, während ich die padding-box benutze ? Hier

ist die Seite, die der Chat-Code aktiviert ist auf: https://www.sundancevacations.com/company/privacy-statement/

Dies ist der Code Zur Zeit arbeite ich mit.

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { 
    display: block; 
} 

audio,canvas,video { 
    display: inline-block; 
} 

audio:not([controls]) { 
    display: none; 
    height: 0; 
} 

[hidden],template { 
    display: none; 
} 

html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 

body { 
    margin: 0; 
} 

a { 
    background: transparent; 
} 

a:focus { 
    outline: thin dotted; 
} 

a:active,a:hover { 
    outline: 0; 
} 

h1 { 
    font-size: 2em; 
    margin: .67em 0; 
} 

abbr[title] { 
    border-bottom: 1px dotted; 
} 

b,strong { 
    font-weight: 700; 
} 

dfn { 
    font-style: italic; 
} 

hr { 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    height: 0; 
} 

mark { 
    background: #ff0; 
    color: #000; 
} 

code,kbd,pre,samp { 
    font-family: monospace,serif; 
    font-size: 1em; 
} 

pre { 
    white-space: pre-wrap; 
} 

q { 
    quotes: "\201C" "\201D" "\2018" "\2019"; 
} 

small { 
    font-size: 80%; 
} 

sub,sup { 
    font-size: 75%; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
} 

sup { 
    top: -.5em; 
} 

sub { 
    bottom: -.25em; 
} 

img { 
    border: 0; 
} 

svg:not(:root) { 
    overflow: hidden; 
} 

figure { 
    margin: 0; 
} 

fieldset { 
    border: 1px solid silver; 
    margin: 0 2px; 
    padding: .35em .625em .75em; 
} 

legend { 
    border: 0; 
    padding: 0; 
} 

button,input,select,textarea { 
    font-family: inherit; 
    font-size: 100%; 
    margin: 0; 
} 

button,input { 
    line-height: normal; 
} 

button,select { 
    text-transform: none; 
} 

button,html input[type=button],input[type=reset],input[type=submit] { 
    -webkit-appearance: button; 
    cursor: pointer; 
} 

button[disabled],html input[disabled] { 
    cursor: default; 
} 

input[type=checkbox],input[type=radio] { 
    box-sizing: border-box; 
    padding: 10px; 
    width: 1%; 
} 

input[type=search] { 
    -webkit-appearance: textfield; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { 
    -webkit-appearance: none; 
} 

button::-moz-focus-inner,input::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

textarea { 
    overflow: auto; 
    vertical-align: top; 
} 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Und momentan sieht meine Box Schlichte wie folgt aus:

*,input[type="search"] { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: padding-box; 
} 

Jede Hilfe wäre sehr geschätzt.

Answer 1

So konnte ich hier das Problem herauszufinden.

Stellt sich heraus, dass die Einstellung der Rahmen von einem Eintrag in einem anderen Abschnitt des CSS übergangen wurde. Es wurde um 10 px Padding um alles herum hinzugefügt, was dazu führte, dass der Text außerhalb des Bereichs angezeigt wurde, wodurch die Illusion erzeugt wurde, dass nichts getippt wurde.

Ich habe es auf nur 5px und die Border-Box-Einstellung funktioniert jetzt ordnungsgemäß. Die sekundäre Datei von CSS (die an einem anderen Ort aufbewahrt wird) ist, was ich getan habe. Das Padding wurde mit einem! Wichtigen Tag versehen, wodurch es die Einstellungen der Chat-Box außer Kraft setzte.

Danke für die Hilfe alle!

Answer 2

Fügen Sie diese an der Spitze Ihres Sheet:

html, 
body { 
    box-sizing: border-box; 
} 
*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 

diese entfernen:

*, input[type="search"] { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing:   padding-box; } 

Wenn Sie mehr box-sizing Regel anderswo haben, stellen Sie sicher wissen, was Sie tun. Ich schlage vor, dass wenn Sie irgendwelche Teile der Vorlage haben, Sie nicht berühren. Alle zusätzlichen box-sizing Eigenschaften, die Sie selbst hinzugefügt haben, sollten Sie entfernen.

html, 
 
body { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    background: black; 
 
}

<input name="email" id="email" style='background: #fff url("https://storage.googleapis.com/code.snapengage.com/wbg/blank.gif"); list-style: none; margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 35px; top: 85px; width: 310px; height: 20px; text-align: left; color: black; line-height: normal; text-indent: 0px; clear: none; font-family: "lucida grande","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; float: none; display: block; position: absolute; z-index: 2; min-height: 20px; max-height: 20px; min-width: 310px; max-width: 310px; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;' 
 
type="text" size="10" value="">