css - 为什么这些表单字段在生产中没有排列，但在开发中是完美的

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 中测试了我的网站。有一些小故障需要修复，这对于不同的浏览器来说是正常的，但表单布局是正确的。