CSS无法在Chrome中运行，但在Firefox中运行

Question

I have a textarea that I am using for suggestions. Below is two screenshots; one in Firefox and one in Chrome. The Firefox one is right, I'm not sure why it is not showing right in Chrome. Can anyone explain why this is happening? It works in Chrome locally, but not when I publish to Azure.

Suggestion Box FireFox

Suggestion Box Chrome

My Style is:

#txtSuggestion {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;   
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    width: 500px;
    height: 100px;
    border: 3px solid #cccccc;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

My div on page is:

<div id="suggestion">
    <h2 style="text-align:center;">Suggestion</h2>
    <h3 style="text-align: center;" id="successText"></h3>
    <textarea id="txtSuggestion"  spellcheck="false">   </textarea>        
    <div style="text-align:center; padding-top: 20px;">
        <span class="btn btn-sm btn-success" id="btnSubmit" onclick="SuggestionSubmit();">Submit</span>
    </div>
</div>

Answer 1

按Shift + F5尝试强制在chrome中刷新缓存

Answer 2

I copied your code and i see it exactly as you see in Firefox.

Maybe press F5 to refresh the page, or open in a new Chrome window.

Good luck