html - h3 中的背景图片在 IE 上不显示

Question

.explorer ul li h2 中的背景图片在 IE 中不显示，但在 chrome 和 firefox 中显示。 .explorer h1 中的背景图片在所有浏览器上都能正确显示。

我有以下 css 和 html

CSS

    .explorer
{
    width:100%;
    height:240px;
}
.explorer h1
{
  display: inline-block;
  text-align: center;
  font: 300 16px/30px "etica", Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  color: #4f2b0d;
  width: 100%;
  background: url('/images/home-difference.jpg') center center no-repeat;

}
.explorer ul
{
    margin:0;
    padding:0;
    list-style:none;
    width:788px;
    height:185px;

}
.explorer ul li h2
{
  display: inline-block;
  text-align: center;
  font: 300 16px/30px "etica", Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  color: #1b91c2;
  width: 100%;
  background: url('/images/home-brk.png')no-repeat center bottom;
  margin-bottom: 10px;
  padding-bottom:18px;
  text-shadow:none;

}
.explorer ul li
{
    width:230px;
    height:185px;
    float:left;
    padding:0 20px 0 20px;
    font-family:Arial, Helvetica, sans-serif;
    font: 12px/18px;
    color:#6f6f6f;
    margin:0;
    position:relative;  
}
.explorer ul li div
{
    background:url(/images/big-btn.png) no-repeat;
    width:190px;
    height:39px;
    color:#6d6129;
    font:bold 12px/39px Arial, Helvetica, sans-serif;
    position:absolute;
    text-align:center;
    position:absolute;
    bottom:0;
    left:30px;
}
.explorer ul li div:hover{ background:url(/images/big-btn-hvr.png) no-repeat;}  

我的HTML

<div class="explorer">
      <h1>Explore the world of Financial Opportunities</h1>
        <ul>
            <li>
                <h2>Financial Planning</h2>
                Explore the power of smart calculators. A conscious effort towards Financial Planning is the CORE TO STRESS FREE LIFE.
                <a href="/"><div>Click here to start Planning</div></a>
            </li>
        </ul>
    </div>

Answer 1

试试这个:

background: url('/images/home-brk.png') center bottom no-repeat;