Пограничный ящик, не отображающий текст, заполняющий поле не отображается правильно

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 (хранится в отдельном месте) - это то, что мне было нужно. В дополнении был отмечен важный тег, который заставлял его переопределять настройки окна чата.

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

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