css - IE6双填充错误

Question

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

目的是让每个彩色框形成一个 220 x 220 像素的正方形，如您在下面的 jsFiddle 中所见。属性height:100px;和 padding: 20px 0 100px 20px;在类里面.awards_square_enter给盒子一个 220px 的高度。

我还在 <span class="enter"> 中添加了一些填充嵌套在 .awards_square_enter 内这是 padding: 45px 0 0 30px;这个 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 中的显示方式，超出了 220 像素的高度:

Answer 1

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