请大神赐教，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则正常，求原因。请赐教
所有回答(2)
1
因为QQ浏览器垃圾!!! 你可以调整兼容性.
0
在头部mate属性中启用最高版本浏览器标识或者启用谷歌内核可解决问题
谢谢。我试试
