Question

以下CSS与ie8完全兼容，但当我将模式切换到ie7时，css无法正常工作。在div中div的高度变大，而div中的列表没有正确显示...请帮忙我......这里是小提琴http://jsfiddle.net/xAE9n/

.wrap {
    margin-left: 0px;
    margin-top: 0px;
    width: 100px;
}

.accordion1 {
    width: 178px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    border: 1px solid #ddd;
}

    .accordion1 h2 {
        font-size: 12px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0px;
        text-decoration: none;
        padding: .25em .25em .25em 2em;
        color: #333;

        background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .accordion1 li h2 a {
        color: black;
        text-decoration: none;
    }

a.active {
    color: white;
}

.accordion1 h2:hover {
    background:orange;
    color: white;
}

.accordion1 li div.content {
    padding: 3px;
    background: #fcfbfb;
    border-bottom: 1px solid #ddd;
    /*border: 1px solid #ddd;*/
}

.accordion1 li:hover h2 {
    color: white !important;
    background-image: url("./compo_images/arrow_exp_n.gif");
    background:orange
}

    .accordion1 li:hover h2 a {
        color: white !important;
    }

.accord > li {
    padding: 0;
    list-style-type: none;
}

    .accord > li > a {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding-left: 12px;
        color: #5f5c5c;
        background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
    }

    .accord > li > ul > li > a {
        text-decoration: none;
        color: #5f5c5c;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
        padding-left: 17px;
    }

    .accord > li > ul {
        list-style-type: none;
        text-align: left;
        margin: 0;
        padding: 1px;
    }

.accord {
    text-decoration: none;
    padding-left: 5px;
}

    .accord > li > a:hover {
        color: #f8b106;
    }

    .accord > li > ul > li > a:hover {
        color: #f8b106;
    }

.accordion1 > li > h2.active {
    color: white;
    background: url('compo_images/gradient_v_orange.gif') repeat-x;
}

    .accordion1 > li > h2.active a {
        color: white;
    }

Answer 1

www.browserhacks.com

您可以使用.selector \ {}（注意反斜杠），这只会在IE7中显示。

示例：

.className\ { color: #000; }
hr\ { color: #fff }

或者，您可能想要制作IE7特定的样式表。将其粘贴到您网站的主题部分将实现此目的。

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Answer 2

您可以采取一些措施来解决IE7问题：

仔细比较IE7和IE8中的结果。
逐一确定您遇到的所有问题
在谷歌搜索您尝试修复的具体问题（仅举例：“IE7高度更大的CSS”）。
尝试解决此问题
如果没有任何效果，请在此处询问有关该特定问题的问题，如果可以，请提供一个示例，以及您为解决该问题所做的努力。

如何使CSS与ie7和其他版本的Internet Explorer兼容

2 个答案: