css - H3 在 IE7 中自动为 100% 宽度

Question

嗨，我创建了一个h3居中并使用 abackground-image和padding. 它在所有浏览器中看起来都很好（即它h3是其中文本的宽度，加上填充），除了 IE7，它h3似乎默认为 100% 宽度。我不想设置静态宽度，因为我需要它根据文本调整大小。有任何想法吗？这是网站：

• http://www.firecrestmoto.co.uk/index.php（这是“我们的最新到货”文本）

h3.bannerh3 {
    font-family: "alternate-gothic-no-1-d",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    font-size: 64px;
    height: 78px;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    position: relative;
    text-shadow: 0px 0px 10px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=0);
    background: url('../../../../img/h2top3.png') repeat-x top, url('../../../../img/h2bottom3.png')  repeat-x bottom;
    -pie-background: url('/img/h2top3.png') repeat-x top, url('/img/h2bottom3.png')  repeat-x bottom; /*PIE*/
    behavior: url(js/pie/PIE.htc);
}

Answer 1

不能inline-block在 IE7 中使用。请尝试以下操作：

display: inline-block;
zoom: 1;
*display: inline;

第二个display属性将由 IE7 解释，并将元素设置为inline. 不幸的是，这将阻止您在 IE7 中拥有您想要的样式，因为inline它们inline-block并不完全相同。

如果需要进一步的样式，条件注释可能更合适：

<!--[if lte IE 7]>
    <style type="text/css">
        h3.bannerh3 {
          display: inline;
          /* Additional styles here */
        }
    </style>
<![endif]-->