Question

您好我创建了一个h3，它居中并使用了background-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

您无法在IE7中使用inline-block。请尝试以下方法：

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

第二个display属性将由IE7解释，并将元素设置为inline。不幸的是，由于inline和inline-block不相同，这会阻止您在IE7中完全按照您的喜好使用该样式。

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

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

在IE7中H3自动100％宽度

1 个答案: