边框不显示文本，填充框不正确显示

Question

I'm currently having an issue with my website and a chat service that we are trying to implement. I've narrowed it down to a CSS issue associated with the border-box 属性.

The problem only exists in Internet Explorer 11 as well. The box displays correctly in Mozilla, Chrome and even older versions of IE. Once the user clicks the "Need Help, Live Chat" button on the left side of the website, they are unable to see their entry text. I know that the data is being entered and works, but for some reason the field does not display what the user types. I figured it was a sizing issue, which was proven correct by displaying the page with out CSS in IE 11, I can see the entry in the box, but once the CSS is enable, it vanishes again from the field. I've tried many edits to get it to work without success, but ended up switching to the padding-box just to see if it works. That seems to be working in both browsers, but in IE 11 the text hugs the bottom border and looks bad.

Is there a way I can either fix the border-box to get the text to display in the correct area, or is there a way that I can float the text upwards while using the padding-box to make it look更好的？

Here is the page that the chat code is enabled on: https://www.sundancevacations.com/company/privacy-statement/

This is the code I am currently working with.

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: "1C" "1D" "18" "19";
}

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

And currently my box sizing looks like this:

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

Any help would be greatly appreciated.

Answer 1

将此添加到样式表的顶部：

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

Answer 2

所以我能够在这里找出问题所在。

事实证明，边框设置被埋在 CSS 的另一部分中的条目覆盖了。它在所有内容周围添加了 10px 的填充，这导致文本显示在该区域之外，从而产生了没有输入任何内容的错觉。

我把它调低到 5px，边框设置现在可以正常工作了。 CSS 的辅助文件（保存在一个单独的地方）是我进入的地方。填充被标记为 !important 标签，导致它覆盖聊天框的设置。

感谢大家的帮助！

边框不显示文本，填充框不正确显示

Border-box not displaying text, padding-box not displaying correctly

html

javascript

css

border-box