Chrome瀏覽器缺陷：頁面加載時出現灰色邊框，顯示爲鍍鉻物？

我注意到當我第一次加載頁面時，我注意到鉻合金底部的灰色邊框。它只發生在清除所有緩存後打開瀏覽器時。它不會發生當第二個選項卡打開相同的頁面Chrome瀏覽器缺陷：頁面加載時出現灰色邊框，顯示爲鍍鉻物？

任何可以告訴我如何解決這個問題，並可能導致這種情況？我附上下方的屏幕抓取和整個HTML和CSS

我使用的Chrome版本版本27.0.1453.94米

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

來源

2013-05-29 user244394

我使用的瀏覽器版本版本27.0.1453.94米 – user244394

我們可以看到該網站的鏈接？ –

這將是您的代碼問題，而不是瀏覽器，所以需要注意，我們需要查看您的實際頁面。 –

將background-attachment: fixed;添加到您的第一個CSS rul E：

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

來源

2013-05-30 00:17:55

謝謝。我曾嘗試過，但它沒有在鉻上工作。灰色的填充仍然顯示在chrome中:( – user244394

確保你有一切都很好，在'Settings> Overrides'中有'chrome'。我之前有過類似的問題，瀏覽器覆蓋已經搞亂了，也許它有幫助。 – Davit

Chrome瀏覽器缺陷：頁面加載時出現灰色邊框，顯示爲鍍鉻物？

回答

相關問題