2012-02-11 138 views
0

這在Firefox中正常工作,但頂部不適用於IE瀏覽器。我已經通過其他的反應,並試圖添加line-height = 1;但沒有工作。誰能告訴我爲什麼這不顯示在IE中?

問題是頂部標題,應該是紅色的白色和藍色,像firefox。在IE上是黑色,黑色,然後是藍色。

#ja-header-a   {background:url(../images/header-bg.png)repeat-x bottom #B70000;} 
#ja-header-a .main   {padding:15px 0;} 
#ja-header-b   {} 

這裏是鏈接到測試網站,嘗試打開它在IE瀏覽器然後firefox。

http://www.alumnifootballusa.com.php5-21.dfw1-1.websitetestlink.com/index.php/123

下面是完整的代碼:

*==========general==========*/ 
body   {font-family:Verdana, Arial, sans-serif;} 
body#bd    {} 
#ja-wrapper  {} 
#ja-inwrapper { } 



#ja-right { 
    background-color: #000000; } 

/*==========header==========*/ 
#ja-header-a   {background:url(../images/header-bg.png) repeat-x 0 bottom #B70000;} 
#ja-header-a .main   {padding:13px 0;} 
#ja-header-b   {} 

h1.logo, div.logo-text h1  {font-size: 250%; line-height: 1; margin-left: -65px;  margin-bottom: -50px; } 



/*logo image*/ 
h1.logo   { } 
h1.logo a, 
h1.logo-offline  {background: url(../images/logo.png) no-repeat left;display: block;} 
h1.logo-offline  {margin:0 auto 25px auto;text-indent:-2000px; overflow:hidden;} 

/*logo text*/ 
div.logo-text h1  {font-size: 200%;font-family: Arial, sans-serif;font-weight: bold;} 
div.logo-text h1 a  {text-decoration: none;} 
p.site-slogan  {color: #ccc;display: block;font-size: 85%;margin: 3px 0 0;padding: 0 10px;text-transform: uppercase;} 

/*header tools*/ 


#ja-tools    {position:absolute;right:35px;bottom:35px;text-align:right;} 
#ja-tools ul.tool-list  {float:right;text-align:right;} 
#ja-tools > ul.tool-list > li {float:right;margin-left:20px;} 
.topnav    {margin-top:5px;} 
.topnav ul    {text-align:right;} 
.topnav ul li   { 
      display:inline; 
      padding: 0 10px 1px 9px; 

background:url(../images/border-top-menu.png) no-repeat right center; 

      } 
.topnav ul li:last-child {background:0; } 
.topnav ul li a   {} 



/*==========navigation==========*/ 
#ja-mainnav   {background:url(../images/nav-border.png) repeat-x bottom;padding-bottom:1px;} 
#ja-mainnav .wrap-inner1 {padding:12px 0 0 0;} 
#ja-mainnav .wrap-inner1 > .main {right:-165px; bottom: 5px;} 
#ja-mainnav .main   {} 
#ja-mainnav .main .main-inner1 {} 
.menu-desc    {font-size:11px!important;} 

#ja-subnav   {background:url(../images/drop-menu-bg.png) repeat-x top;} 

/*==========main featured==========*/ 
#ja-featured   {background:url(../images/featured-bg.png) repeat-x  bottom;padding:20px 0 45px 0;} 



/*==========main container==========*/ 
#ja-container   {} 
#ja-container .content-wrap1 {background: url(../images/content-bg-bottom.png) repeat-x bottom; } 
#ja-container .main  {} 
.main .main-inner1   { margin-left: 0; margin-right: 0; } 


/*==========spotlights==========*/ 
#ja-topsl-a, 
#ja-topsl-b, 
#ja-botsl-a, 
#ja-botsl-b   {padding:10px 0!important;} 

#ja-topsl-a .ja-box, 
#ja-topsl-b .ja-box, 
#ja-botsl-a .ja-box  { background:0;} 

#ja-botsl-b .ja-box  {} 

#ja-topsl-a .ja-box-right, 
#ja-topsl-b .ja-box-right, 
#ja-botsl-a .ja-box-right, 
#ja-botsl-b .ja-box-right  { background: 0;} 

#ja-topsl-a .ja-moduletable, 
#ja-topsl-b .ja-moduletable, 
#ja-botsl-a .ja-moduletable, 
#ja-botsl-b .ja-moduletable {margin-top: 10px;margin-bottom:0!important;padding-bottom:0!important;} 

/*top spotlights*/ 
#ja-topsl-a .main, 
#ja-topsl-b .main   { padding: 0; } 

#ja-topsl-b   { 


    background:url(../images/topsl-bottom-bg.png) repeat-x bottom; 

      padding-bottom:30px!important; 
      margin-bottom:20px; 
      } 


/*==========bottom==========*/ 
#ja-bottom    { 
       color:#bdbbbb; 
       text-shadow: 0 1px 1px #000; 
       background-image:url(../images/grad-bottom.png); 
       background-repeat:no-repeat; 
       background-position:center top; 
       } 
#ja-bottom .bottom-wrap1  { 
       background:url(../images/bottom-top-bg.png) repeat-x top; 
       padding-top:30px; 
       } 

/*bottom spotlights*/ 
#ja-botsl-a .main, 
#ja-botsl-b .main   { padding: 0 0 15px 0; } 
#ja-botsl-a .main-inner1  {} 
#ja-botsl-b .main-inner1  {} 
#ja-botsl-b    { } 


/*==========footer==========*/ 
#ja-footer   { background:url(../images/footer-bg.png);margin-bottom:35px;padding:0;} 
#ja-footer .wrap-inner1 { background:url(../images/footer-border.png) repeat-x top;} 
#ja-footer .wrap-inner2 { background:url(../images/footer-border.png) repeat-x bottom; padding:20px 0;} 
#ja-footer .main  { padding: 0; position: relative; text-align: left; } 
#ja-footer .inner  { padding: 0; } 
#ja-footer small  { font-size: 100%; } 

/*footnav*/ 
#ja-footer .ja-footnav { font-size: 100%; margin: 0; overflow: hidden; position: relative; } 
.ja-footnav ul  { line-height: normal;text-align:right;float:right;margin-right:15px; } 
.ja-footnav li  { display: inline; padding: 0 5px; } 
.ja-footnav li a  { } 
.ja-footnav li a:hover, 
.ja-footnav li a:active, 
.ja-footnav li a:focus { } 

/*copyright*/ 
.ja-copyright  { float:left;width:48%; } 
.ja-copyright small { display: block;padding-left:15px; } 


/*==========miscellanous==========*/ 

#ja-poweredby   {position:absolute;left:450px;top:0; } 
.t3-logo-dark-sm a   {background-image: url(../images/t3-logo.png) !important;} 
#ja-top-panel .main-inner1  {border: 2px dotted #e2e2b5;padding: 5px 10px;text-align: center;margin-top: 15px;background: #ffffcc;position: relative;} 

#ja-banner    {border-top: 1px solid #ccc; } 

div.ja-innerdiv   {border-bottom: 1px dotted #ccc; } 
div.ja-innerdiv h4   {font-family: Helvetica, Arial, sans-serif;font-size: 92%;font-weight: normal;text-transform: uppercase;} 
a.ja-icon-video   {background: url(../images/icon-youtube.gif) no-repeat 5px 8px #fff;border: 1px solid #ccc;color: #666;display: block;font-weight: bold;position: absolute;padding: 5px 5px 5px 43px;right: 10px;top: 8px;text-decoration: none;width: 35px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;box-shadow: 0 0 3px rgba(0, 0, 0, .2);-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);} 
a.ja-icon-video span  { color: #666; } 
a.ja-icon-video:hover, 
a.ja-icon-video:focus, 
a.ja-icon-video:active  { border-color: #ddd; text-decoration: none; } 
a.ja-icon-video:hover span { color: #0F85D8; } 

#ja-absolute .main   {position: fixed;width: auto;height: auto;z-index: 99999;top: 1px;left: 1px;} 
#ja-absolute .main a  {width: 91px;height: 99px;overflow: hidden;display: block;background: url(../images/joomla15.png) no-repeat left top #fff;text-indent:  -9999px;} 
#ja-absolute .main a:hover, 
#ja-absolute .main a:focus  {background-position: left bottom;text-decoration: none;} 
+0

!它顯示得很好。你刷新了Joomla的緩存嗎? – alfasin 2012-02-11 00:23:05

+0

頂部標題-a應該是紅色的,下面有一個白色/灰色ish標題。在IE中,頂部標題顯示全黑。嘗試刷新,仍然無法正常工作。 – user1079804 2012-02-11 00:26:34

+0

在IE9中正常工作,但不是8.你可以嘗試在repeat-x之前添加空格嗎? – 2012-02-11 00:38:47

回答

0

IE8似乎沒有拿起#ja-header-a. 的CSS規則,我認爲語法是錯誤的。

請嘗試以下

#ja-header-a {background:url(../images/header-bg.png) repeat-x 0 bottom #B70000;} 
+0

試過了,沒有顯示出來。我發佈了完整的代碼。 – user1079804 2012-02-11 00:53:09

+0

IE吮吸。對不起 - 我不得不說 - IE導致我很多用戶界面的問題,以及... – alfasin 2012-02-11 05:54:02

+0

我在那裏與亞! – user1079804 2012-02-13 15:55:49

0

我認爲你的問題可能是background速記這是格式不正確。 Firefox可能會解決它,但IE真的很挑剔。

background:url(../images/header-bg.png)repeat-x bottom #B70000; 

通常你應該寫background簡寫,如:

background: <color> || <image> || <repeat> || <attachment> || <position>; 

所以:

background: #b70000 url(../images/header-bg.png) repeat-x bottom; 
+0

切換它,在Firefox上工作,IE上仍然沒有。 – user1079804 2012-02-11 01:05:06

+0

謝謝大家的幫助!發現問題,Joomla T3模板已經優化了CSS,加入了修改和壓縮,我把它關掉了,它工作的很好! – user1079804 2012-02-13 15:57:24

0

試圖在我的IE 9.0 <html>標記前新增DOCTYPE減速

相關問題