Рамка не отображает текст, рамка не отображается правильно

Question

В настоящее время у меня проблема с моим веб-сайтом и сервисом чата, который мы пытаемся внедрить. Я сузил это до проблемы CSS, связанной со свойством border-box.

Эта проблема существует только в Internet Explorer 11. Поле отображается правильно в Mozilla, Chrome и даже более старых версиях IE. Когда пользователь нажимает кнопку "Нужна помощь, чат в чате" в левой части веб-сайта, он не может видеть текст своей записи. Я знаю, что данные вводятся и работают, но по какой-то причине в поле не отображается то, что вводит пользователь. Я подумал, что это проблема с размерами, которая была подтверждена путем отображения страницы без CSS в IE 11, я вижу запись в окне, но как только CSS включен, он снова исчезает из поля. Я перепробовал много изменений, чтобы заставить его работать безуспешно, но в итоге переключился на блок заполнения, просто чтобы посмотреть, работает ли он. Кажется, это работает в обоих браузерах, но в IE 11 текст обнимает нижнюю границу и выглядит плохо.

Есть ли способ, которым я могу исправить поле рамки, чтобы текст отображался в правильной области, или есть способ, которым я могу перемещать текст вверх, используя поле отступа, чтобы он выглядел лучше?

Вот страница, на которой включен код чата: https://www.sundancevacations.com/company/privacy-statement/

Это код, с которым я сейчас работаю.

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;
}

И в настоящее время мой размер коробки выглядит следующим образом:

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

Любая помощь будет принята с благодарностью.

Answer 1

Таким образом, я смог выяснить проблему здесь.

Оказывается, что установка рамки была переопределена записью, похороненной в другом разделе CSS. Было добавлено 10px отступов вокруг всего, что приводило к тому, что текст выводился за пределы области, создавая иллюзию, что ничего не печаталось.

Я уменьшил его до 5px, и настройка рамки теперь работает правильно. Вторичный файл CSS (хранится в отдельном месте) - это то, что мне помогло. Заполнение было помечено тегом! Important, заставляя его переопределять настройки окна чата.

Спасибо всем за помощь!

Answer 2

Добавьте это в начало вашей таблицы стилей:

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

Удали это:

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

Если у вас есть больше box-sizing править где-то еще, убедитесь, что вы знаете, что делаете. Я полагаю, что если есть какие-либо, которые были частью шаблона, вы не трогайте. Любой дополнительный box-sizing свойства, которые вы добавили сами, вы должны удалить.

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="">