0

ページを最初に読み込んだときに、クロムの下部に灰色の境界線があることに気付きました。すべてのキャッシュをクリアした後にブラウザを開いたときにのみ発生します。同じページの 2 番目のタブが開かれている場合は発生しません。

これを修正する方法と、これを引き起こしている可能性のあるものを教えてもらえますか? 以下に画面グラブと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">&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>

ここに画像の説明を入力

4

1 に答える 1

0

最初の CSS ルールに追加background-attachment: fixed;します。

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;
}

デモ

于 2013-05-30T00:17:55.743 に答える