Question

我有一个不在ie8中运行的网页菜单，在ie7运行良好，我不明白什么时候出现问题。

这是代码html。

<div class="menu">
                <ul class="opcions"> 

                    <li class="menu_serveis"><a href="index.php?s=2&i=<? echo $i; ?>" title="serveis">serveis</a></li> 
                    <li class="menu_grafic"><a href="index.php?s=3&i=<? echo $i; ?>&p=0" title="grafic">grafic</a></li> 
                    <li class="menu_logos"><a href="index.php?s=4&i=<? echo $i; ?>" title="logos">logos</a></li> 
                    <li class="menu_senyalitzacio"><a href="index.php?s=5&i=<? echo $i; ?>" title="senyalitzacio">senyalitzacio</a></li> 
                    <li class="menu_planimetria"><a href="index.php?s=6&i=<? echo $i; ?>" title="planimetria">planimetria</a></li> 
                    <li class="menu_webs"><a href="index.php?s=7&i=<? echo $i; ?>" title="webs">webs</a></li>
                    <li class="menu_exposicions"><a href="index.php?s=8&i=<? echo $i; ?>" title="exposicions">exposicions</a></li>
                    <li class="menu_museografia"><a href="index.php?s=9&i=<? echo $i; ?>" title="museografia">museografia</a></li>
                    <li class="menu_packaging"><a href="index.php?s=10&i=<? echo $i; ?>" title="packaging">packaging</a></li>
                    <li class="menu_historic"><a href="index.php?s=11&i=<? echo $i; ?>" title="historic">historic</a></li>
                </ul> 
                </div>

这是css代码：

ul,li {
    list-style-type:none;
    }

.menu{
    height:350px;
    float:left;
    margin-left:-40px;
    }

.opcions li {
    float:left;
    margin-bottom:2px;
    }

.opcions a {
    background:url('../../img/menu.png');
    display:block;
    width:380px;
    height:200px;
    text-indent:-9000%
    }


/*ESTADO NORMAL             -190px   */
.menu_serveis a {width:190px;height:20px; background-position:0px 0px;}
.menu_grafic a {width:190px;height:20px; background-position:0px -20px;}
.menu_logos a {width:190px;height:20px; background-position:0px -40px;}
.menu_senyalitzacio a {width:190px;height:20px; background-position:0px -60px;}
.menu_planimetria a {width:190px;height:20px; background-position:0px -80px;}
.menu_webs a {width:190px;height:20px; background-position:0px -100px;}
.menu_exposicions a {width:190px;height:20px; background-position:0px -120px;}
.menu_museografia a {width:190px;height:20px; background-position:0px -140px;}
.menu_packaging a {width:190px;height:20px; background-position:0px -160px;}
.menu_historic a {width:190px;height:20px; background-position:0px -180px;}

/*ESTADO ROLLOVER*/
.menu_serveis a:hover {background-position:-190px 0px;}
.menu_grafic a:hover {background-position:-190px -20px;}
.menu_logos a:hover {background-position:-190px -40px;}
.menu_senyalitzacio a:hover {background-position:-190px -60px;}
.menu_planimetria a:hover {background-position:-190px -80px;}
.menu_webs a:hover {background-position:-190px -100px;}
.menu_exposicions a:hover {background-position:-190px -120px;}
.menu_museografia a:hover {background-position:-190px -140px;}
.menu_packaging a:hover {background-position:-190px -160px;}
.menu_historic a:hover {background-position:-190px -180px;}

/*ESTADO ACTIVO*/
.menu_serveis a.active {background-position:-190px 0px;}
.menu_grafic a.active {background-position:-190px -20px;}
.menu_logos a.active {background-position:-190px -40px;}
.menu_senyalitzacio a.active {background-position:-190px -60px;}
.menu_planimetria a.active {background-position:-190px -80px;}
.menu_webs a.active {background-position:-190px -100px;}
.menu_exposicions a.active{background-position:-190px -120px;}
.menu_museografia a.active {background-position:-190px -140px;}
.menu_packaging a.active {background-position:-190px -160px;}
.menu_historic a.active {background-position:-190px -180px;}

网站的网址是：http://abs.marcmorales.es/index.php?s=1&p=0&i=0

我该怎么办？

Answer 1

只需将text-indent:-9000%替换为text-indent:-9000px .options a，它也适用于IE8： http://jsfiddle.net/tvhTD/1/

ie8中的菜单不运行

1 个答案: