0

我有一个类似于下面的 CSS。

.ui-icon {
    font-size: 6em;
   height: 180px;
   width: 180px;
}

.ui-icon .ui-icon-label {
    padding-top: 15%;
}

顶部填充不显示 IE9 中的文本（即 ui-icon-label）。

HTML也在下面给出。

<div class="ui-icon-color ui-icon">
<div id="icon-1">
<i class="icon-cog"></i>
</div>
<div class="ui-icon-label">My Label</div>
</div>

但是相同的代码在 Chrome 和 Firefox 中运行良好。IE9 显示 ui-icon-label 直到填充为 13.4%。直到值，当我逐渐增加它时，文本会向下移动一点。超过该值，它会突然消失。但对我来说，15% 看起来是放置标签的最佳位置。我浏览了建议中提供的不同解决方案，例如“clear:both”或使用 W3C 验证器。但他们没有帮助。

仅供参考，icon-cog 类来自 font-awesome。

4

1 回答 1

0

您是否考虑过使用带有媒体查询的 IE9 目标样式表来解决该问题？

 <!--[if IE 9]>
   <link rel="stylesheet" type="text/css" href="ie9.css" />
 <![endif]-->

 // In the CSS:

 @media (max-width: ???px) {
     .ui-icon .ui-icon-label {
        padding-top: 30%;
     }
 }
于 2013-06-09T05:10:52.657 回答