css - Chrome 错误 : Grey border showing up in chrome on page load?

标签 css google-chrome

我注意到当我第一次加载页面时，我注意到 chrome 底部有一个灰色边框。它只发生在我清除所有缓存后打开浏览器时。当为同一页面打开第二个选项卡时不会发生这种情况

谁能告诉我如何解决这个问题以及可能导致这个问题的原因是什么？我在下面附上了一个屏幕截图以及整个 html 和 css

我使用的是 Chrome 版本 Version 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">&copy;  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>

enter image description here

最佳答案

将 background-attachment: fixed; 添加到您的第一个 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%);
    background-attachment: fixed;
}

Demo

关于css - Chrome 错误 : Grey border showing up in chrome on page load?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16825085/

上一篇：html - 当我自定义 HTML 表单元素(即下拉列表、单选按钮等)时，需要牢记哪些性能注意事项？

下一篇：css - 将连续缩略图列表 Bootstrap 到网格中

相关文章：

javascript - 通过 HTML 和 CSS 和/或 Javascript 编号的列表

javascript - Web iPad 应用程序 - 如何区分单指和两指滚动

javascript - 无法弄清楚如何对谷歌应用引擎执行 XMLHttpRequest

google-chrome - Chrome 将数据从后台页面发送到浏览器操作

javascript - Safari 和 Chrome 将表单值添加到 URL

google-chrome - Chrome "Developer Tools"元素 - 隐藏烦人的黄色尺寸框

javascript - 如何更改 Chrome 中已访问链接的颜色？

php - 根据分辨率计算拇指数

CSS - 绝对定位和流体宽度

javascript - 旋转整个谷歌图表

©2024 IT工具网  联系我们