同一页面在服务器上的效果和本地调试的效果不同

今天在尝试将以修改好的前端页面部署到服务器上进行调试的时候发现了一个奇怪的问题.同一浏览器访问服务器上的页面布局和本地调试不同.

chrome
本地

访问服务器效果

代码

    <div class="container" style="padding-top: 30px; background-color: #1b6d85;  padding-bottom: 40px; margin-top: 4% ;" id="FromPane" >
            <div id="ShowForm" class="row" style="background-color: #3e8f3e; margin: 0 auto">
                <div class="col-md-10"  style=" width: 100%;  margin: 0 auto ; background-color: #8a6d3b; " >
                    <div id="bodyContent" style="width: 90% ; background: #e0e0e0; min-height: 500px; border-radius: 5px; margin: 0 auto; padding: 20px;" >
                        <form id="submitStudentForm" onsubmit="return false">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group required">
                                        <label class="control-label" >姓名<span style="color: red;">*</span></label>
                                        <input name="username"  id="subUsername"  type="text" class="form-control" placeholder="请输入姓名">
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >昵称</label>
                                        <input name="stuNickname" id="subNickname" type="text" class="form-control" placeholder="输入昵称">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >学校</label>
<!
                                        <input type="text" class="form-control" name="school" id="school-name" value="请选择大学" onblur="if(this.value==''){this.value='请选择大学'}" onfocus="if(this.value=='请选择大学'){this.value=''}" onclick="pop()" />
                                    </div>
                                </div>
                            </div>


                            <div class="row"  style="display: block" id="showStuClass">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >班级</label>
                                        <input name="stuClass" id="subClass" type="text" class="form-control" placeholder="软件191" >
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="display: block" id="showStuNumber">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >学号</label>
                                        <input name="stuNo" id="stuNumber" type="text" class="form-control" placeholder="请输入学号">
                                    </div>
                                </div>
                            </div>

                            <div class="row" id="showTelephone" style="display: block">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >手机号码</label>
                                        <input name="telephoneNumber" id="telephone" type="text" class="form-control" placeholder="请输入手机号">

                                        <select name="gender" class="form-control" aria-placeholder="选择是否填写手机号" id="telephoneSpare"  style="display: none">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>QQ号</label>
                                        <input type="text" class="form-control" name="qqNumber"  id="stuQQ" placeholder="请输入qq号" />
                                    </div>
                                </div>
                            </div>

<!--                            <div class="row">-->
<!--                                <div class="col-md-12">-->
<!--                                    <div class="form-group">-->
<!--                                        <label>邮箱</label>-->
<!--                                        <input type="text" class="form-control" name="email"  id="subEmail" placeholder="请输入邮箱" />-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

                            <div class="row" style="display: block" id="showSurface">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label >打印题面</label>
                                        <select name="gender" class="form-control" aria-placeholder="选择是否打印题目" id="printSurface"  data-toggle="tooltip" data-placement="bottom">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>验证码</label>
                                        </br>
                                       <div>
                                           <input type="text" class="form-control" name="verificationCode" id="checking"  placeholder="请输入验证码"  data-toggle="tooltip" data-placement="bottom">
                                           <a  id="sendCode">获取qq邮箱验证码</a>
                                       </div>

                                    </div>
                                </div>
                            </div>



                           <div class="row">
                               <div class="col-md-12">
                                   <div class="form-group"  >

                                       <!-- 点击式按钮建议高度介于36px与46px  -->
                                       <div id="vaptchaContainer" style="width: 100%">
                                           <!--vaptcha-container是用来引入VAPTCHA的容器,下面代码为预加载动画,仅供参考-->
                                           <div class="vaptcha-init-main">
                                               <div class="vaptcha-init-loading">
                                                   <a href="http://www.recaptcha.net/" target="_blank">
                                                       <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
                                                   </a>
                                                   <span class="vaptcha-text">VAPTCHA is initializing...</span>
                                               </div>
                                           </div>
                                       </div>

                                   </div>
                               </div>
                               <!--携带token ,server  -->
                           </div>

                            <div class="form-group">
                                <button type="submit" name="submit" class="btn btn-primary" style="width: 60%" id="submitInformation">Submit</button>
                            </div>

                        </form>


                    </div>
                </div>
            </div>
        </div>

我设置了土红色的盒子的width:100px; 应该和绿色那层盒子的大小一样,但是不知道为什么,在服务器上就没有效果了.

本人前端小白,希望各位大神指点一下是为啥? 改怎么修改

阅读 2.3k
1 个回答

十有八九服务的cdn某处的css样式污染所致。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题