css - IE6双填充错误

Question

我创建了一些在其他浏览器中显示良好的彩色框，但是 IE6 无法正确显示它们。在任何人询问或讽刺我为什么要费心支持 IE6 之前，这不是我的决定，而是我的经理。

其目的是每个彩色框形成一个 220 x 220 像素的正方形，如下面的 jsFiddle 所示。属性height:100px;和padding: 20px 0 100px 20px;类.awards_square_enter中的框的高度为 220 像素。

我还向<span class="enter">嵌套的内部添加了一些填充，.awards_square_enter即padding: 45px 0 0 30px;This padding 在 IE6 中似乎翻了一番，并将框的高度增加到超过 220px 。

http://jsfiddle.net/kFRrM/

.awards_square_enter a {
    background-image: url("../images/icons/right_arrow.png");  
    background-repeat: no-repeat;
    background-position: 11% 85%; 
    display:block; 
    font-size: 30px;
    height:100px; 
    line-height: 1.1em;
    height:100px;  
    padding: 20px 0 100px 20px;
}

以下是它在 IE6 中超出 220px 高度的显示方式：

Answer 1

所以通过条件注释为 ie6 应用单独的样式。更改您为两者设置的填充，直到它们等于您想要的，样式仅适用于 ie6