首页 新闻 搜索 专区 学院

请大神赐教,HTML转成JSP之后,页面显示错误,谷歌浏览器正常,QQ浏览器显示错误。

0
[待解决问题]
  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <%if(session.getAttribute("user") != null)
  4 {
  5     request.getRequestDispatcher("index.jsp").forward(request, response);
  6 }%>
  7 <!DOCTYPE html>
  8 <html lang="en">
  9 <head>
 10     <meta charset="UTF-8">
 11     <title>示例登陆页</title>
 12     <style>
 13         #win10-login {
 14             background: url('./img/wallpapers/login.jpg') no-repeat fixed;
 15             width: 100%;
 16             height: 100%;
 17             background-size: 100% 100%;
 18             position: fixed;
 19             z-index: -1;
 20             top: 0;
 21             left: 0;
 22         }
 23 
 24         #win10-login-box {
 25             width: 300px;
 26             overflow: hidden;
 27             margin: 0 auto;
 28         }
 29 
 30         .win10-login-box-square {
 31             width: 105px;
 32             margin: 0 auto;
 33             border-radius: 50%;
 34             background-color: darkgray;
 35             position: relative;
 36             overflow: hidden;
 37         }
 38 
 39         .win10-login-box-square::after {
 40             content: "";
 41             display: block;
 42             padding-bottom: 100%;
 43         }
 44 
 45         .win10-login-box-square .content {
 46             position: absolute;
 47             width: 100%;
 48             height: 100%;
 49         }
 50 
 51         input {
 52             width: 90%;
 53             display: block;
 54             border: 0;
 55             margin: 0 auto;
 56             line-height: 36px;
 57             font-size: 20px;
 58             padding: 0 1em;
 59             border-radius: 5px;
 60             margin-bottom: 11px;
 61         }
 62 
 63         .login-username, .login-password {
 64             width: 91%;
 65             font-size: 13px;
 66             color: #999;
 67         }
 68 
 69         .login-password {
 70             width: calc(91% - 54px);
 71             -webkit-border-radius: 2px 0 0 2px;
 72             -moz-border-radius: 2px 0 0 2px;
 73             border-radius: 5px 0 0 5px;
 74             margin: 0px;
 75             float: left;
 76         }
 77 
 78         .login-submit {
 79             margin: 0px;
 80             float: left;
 81             -webkit-border-radius: 0 5px 5px 0;
 82             -moz-border-radius: 0 5px 5px 0;
 83             border-radius: 0 5px 5px 0;
 84             background-color: #009688;
 85             width: 54px;
 86             display: inline-block;
 87             height: 36px;
 88             line-height: 36px;
 89             padding: 0 auto;
 90             color: #fff;
 91             white-space: nowrap;
 92             text-align: center;
 93             font-size: 14px;
 94             border: none;
 95             cursor: pointer;
 96             opacity: .9;
 97             filter: alpha(opacity=90);
 98 
 99         }
100     </style>
101 </head>
102 <body>
103 <div id="win10-login">
104     <div style="height: 10%;min-height: 120px"></div>
105     <div id="win10-login-box">
106         <div class="win10-login-box-square">
107             <img src="./img/avatar.jpg" class="content"/>
108         </div>
109         <p style="font-size: 24px;color: white;text-align: center">游客</p>
110         <form method="POST" action="<%=request.getContextPath() %>/Login">
111             <!--用户名-->
112             <input type="text" placeholder="请输入登录名" name="user" class="login-username">
113             <!--密码-->
114             <input type="password" placeholder="请输入密码" name="pass" class="login-password">
115             <!--登陆按钮-->
116             <input type="submit"  value="登录" id="btn-login" class="login-submit"/>
117             <h1 style="font-size: 18px;color: red;"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %></h1>
118         </form>
119     </div>
120 </div>
121 </body>
122 </html>

两个输入框在谷歌浏览器打开时,高度正常,QQ浏览器高度不正常,如果后缀改为html则正常,求原因。请赐教

吕布v1.0的主页 吕布v1.0 | 菜鸟二级 | 园豆:206
提问于:2018-05-15 05:45
< >
分享
所有回答(2)
1

因为QQ浏览器垃圾!!!   你可以调整兼容性.

DanBrown | 园豆:1511 (小虾三级) | 2018-05-15 10:30
0

在头部mate属性中启用最高版本浏览器标识或者启用谷歌内核可解决问题

大da脸 | 园豆:108 (初学一级) | 2018-05-15 16:01

谢谢。我试试

支持(0) 反对(0) 吕布v1.0 | 园豆:206 (菜鸟二级) | 2018-05-15 16:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册