IE9 中的 CSS 顶部填充

Question

我有一个类似于下面的 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 直到 padding 为 13.4%。直到这个值，当我逐渐增加它时，文本会向下移动一点。高于该值它突然消失。但对我来说，15% 看起来是放置标签的最佳位置。我经历了建议中提供的不同解决方案，例如“clear:both”或使用 W3C 验证器。但他们没有帮助。

仅供引用，icon-cog 类来自 font-awesome。

Answer 1

您是否考虑过使用带有媒体查询的 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%;
     }
 }