ボーダーボックスにテキストが表示されない、埋め込みボックスが正しく表示されない

Question

現在、私が実装しようとしている私のウェブサイトやチャットサービスに問題があります。私はそれをborder-boxプロパティに関連するCSSの問題に絞り込んだ。

問題はInternet Explorer 11でも存在します。このボックスは、Mozilla、Chrome、さらにはIEの古いバージョンでも正しく表示されます。ユーザがウェブサイトの左側の「ヘルプ、ライブチャットが必要です」ボタンをクリックすると、ユーザは入力テキストを見ることができません。私は、データが入力され、動作していることを知っていますが、何らかの理由でフィールドにユーザーが入力したものが表示されません。私はそれがサイジングの問題であると考えました。IE 11でCSSを使用してページを表示すると正しいと判断されました。ボックスのエントリが表示されますが、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; 
} 

は、この削除：あなたはどこにももうbox-sizingルールを持っている場合は

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

を、あなたは何をしているか知っていることを確認してください。テンプレートの一部であるものがあれば触れないことをお勧めします。追加した追加の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="">