我注意到当我第一次加载页面时，我注意到 chrome 底部有一个灰色边框。只有在清除所有缓存后打开浏览器时才会发生这种情况。当为同一页面打开第二个选项卡时不会发生这种情况
任何人都可以告诉我如何解决这个问题以及可能导致这个问题的原因吗？我在下面附上一个屏幕抓取以及整个 html 和 css
我正在使用 Chrome 版本 27.0.1453.94 m
CSS
BODY {
padding:0;
margin:0;
background-color: #8DA3AE;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Opera */
background-image: -o-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #95ABB6), color-stop(1, #6D838E));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #95ABB6 0%, #6D838E 100%);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
HTML {
height:100%;
}
input{
width: 172px;
}
.WhiteBg {
padding:0;
margin:0;
background: #FFFFFF;
}
/* Messages classes */
.ErrorMessageCSSClass{
color : red ;
}
.InfoMessageCSSClass{
color : blue ;
}
.WarningMessageCSSClass{
color : green ;
}
.MessageCSSClass{
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.LoginPage {
background-image: url("../images/Login.gif");
background-position: center top;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
color: #000000;
font: 12px Arial,Helvetica,sans-serif;
height: 405px;
position: relative;
text-align: left;
top: 200px;
width: 480px;
}
.LoginErrorPage {
background: url(../images/Login_error.gif) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
position: relative;
top: 150px;
height: 386px;
width: 432px;
text-align: left;
}
/* Error Message Area */
.LoginErrorLayer {
-x-system-font:none;
border:1px solid;
color:red;
background-color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:16px;
overflow:hidden;
padding-bottom:2px;
padding-left:5px;
padding-top:2px;
text-align:left;
}
/* Button Normal Size Style */
.BtnLoginStyle {
border: 1px solid #BECDDC;
color: #000000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 340px;
width: 61px;
}
.BtnLoginStylePressed {
border: 1px solid #BECDDC;
color: #222222;
display: block;
font: 12px/22px Arial,Helvetica,sans-serif;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 342px;
width: 61px;
}
.BtnLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background-image: url(../images/LoginButtonNormal.gif) no-repeat;
}
.BtnLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/LoginButtonPressed.gif) no-repeat;
}
/* Button Big Size Style */
.BtnBigLoginStyle {
position:absolute;
top:346px;
width:118px;
height:23px;
z-index:1;
overflow: hidden;
}
.BtnBigLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonNormal.gif) no-repeat;
}
.BtnBigLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonpRressed.gif) no-repeat;
}
.LoginVerNum {
position:absolute;
left:135px;
top:88px;
width:136px;
height:16px;
z-index:3;
font: 11px Arial, Helvetica, sans-serif;
color: #003984;
}
.LoginProductName {
color: #013A85;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
height: 17px;
left: 135px;
position: absolute;
top: 107px;
width: 289px;
z-index: 7;
}
.LoginEnterInfo {
position:absolute;
left:206px;
top:196px;
width:187px;
height:20px;
z-index:4;
text-align: right;
}
.LoginFieldBoxArea {
position:absolute;
left:245px;
top:205px;
width:200px;
height:59px;
z-index:5;
}
.LoginEntryBoxDiv {
position:relative;
width:100%;
height:28px;
}
.LoginFieldNameArea {
position:absolute;
left:145px;
top:200px;
width:93px;
height:59px;
z-index:6;
}
.LoginFieldName {
position:relative;
display:block;
height:28px;
text-align: right;
line-height: 17px;
font: 12px Arial, Helvetica, sans-serif;
}
.FieldsStyle {
font: 12px arial;
color: #000000;
width: 100%;
}
.LoginCopyright {
color: #5D5D5D;
font: 10px Arial;
height: 15px;
left: 210px;
position: absolute;
text-align: center;
top: 375px;
width: 240px;
z-index: 2;
}
.LoginOptions {
position:absolute;
text-align: center;
left:282px;
top:258px;
width:174px;
height:25px;
z-index:2;
font: 12px Arial;
text-decoration: underline;
color: #001ad5;
}
.LoginRemember {
position:absolute;
text-align: center;
left:135px;
top:278px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
.LoginWarning {
position:absolute;
text-align: center;
left:114px;
top:303px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.HelpPage {
background: #FFFFFF url(../images/HelpAboutbg.jpg) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
}
.HelpInfoArea {
position:absolute;
left:10px;
top:257px;
width:411px;
height:7px;
z-index:1;
font: 14px/20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
}
.HelpAppName {
display:block;
}
.HelpVerNum {
display:block;
}
/*
POLICY PERMISSION
*/
.groupList{
width : 400px ;
height: 388px ;
border: 1 ;
border-color: blue;
}
.viewGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.ackGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.rightButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.leftButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.selectOneMenu{
width: 150px;
}
.autoCompleteText{
width:320px ;
}
.autoCompleteSuggest{
width:340px ;
border-color: blue ;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title> </title>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <style type="text/css" media="screen">@import 'css/cas.css';</style> -->
<style type="text/css" media="screen">@import 'css/ie_cas.css';</style>
<style type="text/css" media="screen">@import 'css/loginscreen.css'/**/;</style>
<script type="text/javascript" src="js/common_rosters.js"></script>
<link rel="icon" href="/cas-server/favicon.ico" type="image/x-icon" />
</head>
<body id="cas" onload="init();">
<div id="content">
<SCRIPT>
function showDownImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStylePressed"
}
function showUpImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStyle"
}
</SCRIPT>
<div align="center">
<form id="fm1" class="fm-v clearfix" action="" method="post">
<div class="LoginPage">
<input class="BtnLoginStyle" id="submit" name="submit" onmousedown="showDownImage('submit');" onmouseup="showUpImage('submit');" onmouseout=showUpImage('submit'); accesskey="l" value="Login" tabindex="4" type="submit" style="left:310px;" />
<input class="BtnLoginStyle" id="reset" name="reset" onmousedown="showDownImage('reset');" onmouseup="showUpImage('reset');" onmouseout=showUpImage('reset'); accesskey="c" value="Cancel" tabindex="5" type="reset" style="left:377px" />
<div class="LoginCopyright">© All Rights Reserved</div>
<div class="LoginVerNum">Version 11.0</div>
<div class="LoginFieldBoxArea">
<div class="LoginEntryBoxDiv">
<input id="username" name="username" class="required" tabindex="1" accesskey="n" type="text" value="" size="25" autocomplete="false"/>
</div>
<div class="LoginEntryBoxDiv">
<input id="password" name="password" class="required" tabindex="2" type="password" value="" size="25" autocomplete="false"/>
</div>
</div>
<div class="LoginFieldNameArea">
<div class="LoginFieldName"><label for="username">User</label></div>
<div class="LoginFieldName"><label for="password">Password</label></div>
</div>
<div class="LoginProductName">Infrastructure /<br>Provisioning
</div>
<div class="row btn-row">
<input type="hidden" name="lt" value="e2s1" />
<input type="hidden" name="_eventId" value="submit" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
