css - 谁能告诉我为什么这没有出现在 IE 中？

Question

这在 Firefox 中工作正常，但顶部部分在 IE 上不起作用。我查看了其他回复并尝试添加 line-height=1;但没有用。

问题是顶部标题，应该是红白蓝，像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;}

Answer 1

我认为您的问题可能是 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;