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直到填充为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%;
     }
 }

IE9中的CSS Top Padding

1 个答案: