なぜこれらのフォームフィールドはProductionでは整列していませんが、開発には完璧です

Question

私はモーダルフォームを作成しました。次のように開発モードでは、それは偉大に見える：

次のようにしかしHerokuの上のプロダクションモードで見えます：

私は何度もこれを見て、変化してきましたボックスの幅などの値は何も働いていないようです。開発モードでのデザインと一致するように、プロダクションモードでフォームを取得するのに役立ちました。

MODALためのHTML：

<div id="openModal" class="formModalContainer"> 
    <div class="topBox"> 
     <div class="closeModal"><a href="#">X</a></div> 
     <div class="clear"></div> 
     <div class="formLogo"><%= image_tag "ProvenWordLogoSmall.png", :alt=> "Samll Version of ProvenWord Logo" %></div> 
    </div> 
    <div class="bottomBox"> 
     <h3>Free Quote Form</h3> 
     <div class="formContainer"> 
      <form class="freeQuoteForm" autocomplete="off"> 
       <fieldset> 
        <div class="formField"> 
         <label class="formLabel" for="firstName">First Name</label> 
         <input type="text" id="firstName" class="input" tabindex="1" required> 
        </div> <!-- holds the first name field --> 
        <div class="formField rightField"> 
         <label class="formLabel" for="LastName">Last Name</label> 
         <input type="text" id="LastName" class="input" tabindex="2" required> 
        </div> <!-- holds the last name field --> 
        <div class="formField wide"> 
         <label class="formLabel" for="email">Email Address</label> 
         <input type="email" id="email" class="input" tabindex="3" required> 
        </div> <!-- holds the email field --> 
        <div class="formField wide sampleText"> 
         <label class="formLabel sampleText" for="sampleText">Please include a 1000 word sample from your document.</label> 
         <textarea rows="12" cols="50" id="sampleText" tabindex="4" wrap="hard" class="input" required></textarea> 
        </div> <!-- holds the sample text field --> 
        <div class="formField"> 
         <input type="checkbox" class="input checkbox" name="verifyResources" id="verifyResources" tabindex='5' value="verify" required> 
         <label class="formLabel checkbox" for="verifyResources">Check resource formatting?</label> 
        </div> <!-- holds the checkbox --> 
        <div class="formField rightField"> 
         <select name="selectStyle" class="input selectStyle" tabindex="6" required> 
          <option selected disabled>Choose Editing Standard</option> 
          <option value="APA">APA</option> 
          <option value="EPA">EPA</option> 
         </select> 
        </div> <!-- holds the select box --> 
        <p class="disclaimer"><%=image_tag "lock.png", :alt=> 'icon of a padlock'%>We respect your privacy. Your information will be kept strictly confidential.</p> 
        <input class="btn-style" type="submit" value="Submit"> 
       </fieldset> 
      </form> 
     </div><!-- formContainer --> 
     <div class="infoBox" id="sampleTextBox"> 
      <div class="popupPointer pointerRight"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias dignissimos sapiente non illum nesciunt! Quae quisquam, maiores autem. Tempora minima fuga molestias, error corrupti, nulla repellat delectus totam quae quod!</p> 
       <a href="javascript:void(0);" class="closeInfoBox">I understand</a> 
      </div><!-- popupPointer --> 
     </div><!-- infoBox --> 
     <div class="infoBox" id="verifyResourcesBox"> 
      <div class="popupPointer pointerRight"> 
       <p>CHeck this shit</p> 
       <a href="javascript:void(0);" class="closeInfoBox">I understand</a> 
      </div><!-- popupPointer --> 
     </div><!-- infoBox --> 
    </div><!-- Bottom Box --> 
</div><!-- modalDialog --> 

CSS：

.formModalContainer {

/* The fixed postion ensures that the modal will be there as the user scrolls down the page */ 
    position: fixed; 
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif; 
    /* setting these to 0 makes sure */ 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    /* The backgrond here is dark and almost completly opaque */ 
    background-image: url(asset-path('paper2.png')); 
    background-repeat: repeat; 
    /* This makes usre that the modal is above all other content */ 
    z-index: 99998; 
    opacity:0; 
    visibility: hidden; 
    overflow: auto; /* Enable scroll if needed */ 
} 

.formModalContainer.open { 
    animation: fadeIn 0.5s forwards; 
    /* This means that when the link is hovered over it becomes active */ 
    pointer-events: auto; 
} 



.formModalContainer.closed { 
    animation: fadeOut 1s ease forwards; 
    /* This means that when the link is hovered over it becomes active */ 
    /*pointer-events: none;*/ 
} 


.topBox { 
    width: 640px; 
    margin: 0 auto; 
    height: 45px; 
    position: relative; 
} 

.closeModal { 
    opacity: 0; 
    visibility: hidden; 
    color: gray; 
    border: 1px solid gray; 
    border-top: none; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    width: 15px; 
    text-align: center; 
    padding: 2px 10px 2px 10px; 
    float: right; 
    transition: background-color 0.5s ease; 
} 

.closeModal:hover { 
    background-color: #92E7C9; 
} 

.closeModal a { 
    text-decoration: none; 
} 

.formLogo { 
position: absolute; 
top: -30px; 
} 

.bottomBox { 
    position: relative; 
    background: white; 
    margin: 30px auto; 
    width: 640px; 
    height: 680px; 
    border: 1px solid #9c9c9c; 
} 

.formModalContainer.open > .topBox > .formLogo { 
    animation: fadeIn 1.5s forwards, slideDown 0.5s 0.5s forwards; 
} 

.formModalContainer.open > .bottomBox { 
    animation: fadeIn 1.5s forwards, slideUpBottom 0.75s forwards; 
} 

.formModalContainer.closed > .topBox > .formLogo { 
    animation: slideUp 0.5s ease forwards; 
} 

.formModalContainer.closed > .bottomBox { 
    animation: slideDownBottom 0.75s forwards; 
} 

.formModalContainer.open > .topBox > .closeModal { 
    animation: fadeIn 2.5s forwards, bounceInUp 1s forwards; 
} 

.bottomBox h3 { 
    text-align: center; 
    padding: 20px 0; 

} 

.formContainer { 
    margin: 0 auto; 
    width: 530px; 
    height: 531px; 
    text-align: right; 
    border-bottom: 1px solid #9c9c9c; 
    box-sizing: border-box; 

} 

.formField { 
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: 200; 
    width: 50%; 
    height: 60px; 
    border: 1px solid #9c9c9c; 
    border-bottom: none; 
    display: inline-block; 
    vertical-align: top; 
    box-sizing: border-box; 
    position: relative; 
    animation: fadeColorWhite 0.5s 0s ease 1 forwards; 
} 

.formField.wide { 
    width: 100%; 
} 

.rightField { 
    float: right; 
    border-left: none; 
} 


.input { 
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: 300; 
    border: none; 
    display: inline-block; 
    height: 60px; 
    padding: 0px; 
    background: transparent; 
    width: 100%; 
    text-indent: 10px; 
    outline:none; 
    margin: 0; 

} 

.formLabel { 
    position: absolute; 
    left: 10px; 
    bottom: 2px; 
    color: #bfbfbf; 
    -webkit-transform-origin: center left; 
} 

.formField.selected { 
    animation: fadeColorBlue 0.5s forwards; 
} 

.formField:hover { 
    animation: fadeColorBlue 0.5s forwards; 
} 

.formLabel.selected { 
    animation: colorScaleMove 0.75s forwards; 
} 

.sampleText { 
    height:350px; 
} 

#sampleText { 
    height: 100%; 
    overflow: auto; 
    resize: none; 
    padding-top: 5px; 
} 

.formLabel.sampleText { 
    top: 5px; 
    height: 20px; 
} 

.formLabel.sampleText.selected { 
    animation: fadeOut 0.5s forwards; 
} 

.input.checkbox { 
    margin-left: 7px; 
    vertical-align: middle; 
} 

.formLabel.checkbox { 
    top: 20px; 
    left: 30px; 
    transition: color 1s; 
} 

.formLabel.checkbox.selected { 
    animation: none; 
    color: black; 
} 


p.disclaimer { 
    padding: 10px 0 15px 0; 
    font-size: 10px; 
    font-weight: 300; 
    text-align: center; 
} 

p img { 
    display: inline-block; 
    padding-right: 10px; 
    vertical-align: text-bottom; 
} 

.btn-style{ 
    border : solid 0px #e6e6e6; 
    border-radius : 2px; 
    moz-border-radius : 2px; 
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0); 
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0); 
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0); 
    font-size : 15px; 
    color : #000000; 
    padding : 5px 19px; 
    background-color : #92E7C9; 
    transition: background-color 0.5s ease; 
} 


input.btn-style:hover { 
    background-color: #A5FDDE; 
} 

legend { 
    padding: 0; 
    display: table; 
} 
fieldset { 
    border: 0; 
    padding: 0.01em 0 0 0; 
    margin: 0; 
    min-width: 0; 
} 
body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
} 

Answer 1

私はこれが起こった理由を正確に言うことはできませんが、私は更新を与えることができますどのように私はそれを修正したかについて。 Chromeのバージョンをアップグレードしました。 SafariとFirefoxで私のサイトもテストしました。異なるブラウザでは正常であるように修正するには小さな問題がありますが、フォームのレイアウトは正しいです。