html - 列表在 IE7/8 中显示不正确。图像、边界半径等

Question

首先，jsfiddle:http://jsfiddle.net/MhFk4/2/

在 IE9 中一切正常，但在 IE8 及以下版本中我遇到了问题......在开发站点上，IE8 中根本只显示一个按钮(但在 fiddle 上它显示了，但边框-radius 工作不正常？。)

这里是实际的开发站点，可以看到 IE8 在那里做了什么:http://tinyurl.com/bxy449e

.view-home-cta-view {
ul {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    height: 380px;

    li {
        float:left;
        margin: 0 25px 0 0;
        position:relative;

        .views-field-field-cta-image {
            border: 10px solid #fff;
            @include border-radius(150px);
            width:270px;
            box-shadow:0 0 25px rgba(0, 0, 0, 0.7);

            -moz-background-clip: padding; 
            -webkit-background-clip: padding-box; 
            background-clip: padding-box;

            img {
                max-width:100%;
                height: auto;
                @include border-radius(140px);
            }
        }
        .views-field-field-regular-link {
            font-family: $o;
            font-size:22px;
            width:100%;
            position:absolute;
            bottom:14px; // 60px up from bottom
            left: 0;
            z-index: 3000;
            a {
                color:#fff;
                text-decoration: none;
                background: $green;
                display:block;
                text-align:center;
                line-height:22px;
                padding: 13px 0 15px;
                @include border-radius(5px);
                box-shadow:0 0 10px rgba(0, 0, 0, 0.7);
                @include transition(0.5s);
                &:hover {
                    background: lighten($green,5%);
                }
            }
        }
        .views-field-field-attachment-link {
            font-family: $o;
            font-size:16px;
            width:100%;
            position:absolute;
            bottom:-20px;
            left:0;
            a {
                color:#fff;
                text-decoration: none;
                background: $brown;
                display:block;
                text-align:center;
                @include border-radius(0 0 5px 5px);
                margin: 0 20px;
                padding: 8px 0 10px;
                line-height:16px;
                box-shadow:0 0 7px rgba(0, 0, 0, 0.6);
                @include transition(0.5s);
                &:hover {
                    background: lighten($brown,5%);
                }
            }
        }

        &.views-row-last {
            margin-right: 0;
        }
    }
}}

所有 SCSS 代码都在 JSfiddle 中(带有 mixins 和颜色变量)。如果有人能对此有所启发，我将不胜感激，谢谢!

Answer 1

这里的问题围绕z-index展开, 我设法通过应用 z-index 来解决它到 li 内的每个容器 div元素并添加一个额外的 z-index在 li 上本身。