IE中的列表样式未设置为无

Question

我有一个菜单结构，其中我使用导航的无序列表。问题出现在IE中，好像列表样式没有设置为none，如下所示：

在Chrome中看起来不错：

以下是代码：

HTML：

<div id="tabPrincipale" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabUtenti" onclick="setFrameSrcTop('UtentiSport','#tabGiochi');"><span>Users</span></a></li>
                            <li class="ui-state-default ui-corner-top"><a href="#tabUtentiRete" onclick="setFrameSrcTop('ReteUtenti','#tabRete');"><span>Network</span></a></li>

                        </ul>
                        <div id="tabUtenti" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                            <div id="tabGiochi" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                                <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                                    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabReport" onclick="setFrameSrc('UtentiSport');"><span>Sport</span></a></li>
                                    <li class="ui-state-default ui-corner-top"><a href="#tabReport" onclick="setFrameSrc('UtentiCasino');"><span>Casino</span></a></li>
                                    <li class="ui-state-default ui-corner-top"><a href="#tabReport" onclick="setFrameSrc('UtentiPoker');"><span>Poker 3d</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="tabUtentiRete" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                            <div id="tabRete" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                                <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                                    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabReport" onclick="setFrameSrc('ReteUtenti');"><span>Agents</span></a></li>
                                    <li class="ui-state-default ui-corner-top"><a href="#tabReport" onclick="setFrameSrc('ReteSport');"><span>Sport</span></a></li>
                                    <li class="ui-state-default ui-corner-top"><a href="#tabReport" onclick="setFrameSrc('ReteCasino');"><span>Casino</span></a></li>
                                    <li class="ui-state-default ui-corner-top"><a href="#tabReport" onclick="setFrameSrc('RetePoker');"><span>Poker 3d</span></a></li>


                                </ul>
                            </div>
                        </div>

                    </div>

CSS：

.ui-tabs #tabGiochi .ui-tabs-nav, .ui-tabs #tabRete .ui-tabs-nav {
list-style: none;
position: relative;
padding: 0;
height: 35px;
background-color: #B10000;
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B10000),to(#490000));
background-image: -webkit-linear-gradient(top,#B10000,#490000);
background-image: -moz-linear-gradient(top,#B10000,#490000);
background-image: -ms-linear-gradient(top,#B10000,#490000);
background-image: -o-linear-gradient(top,#B10000,#490000);
border-radius: 5px;
width: 1162px;
}
#tabGiochi .ui-widget-header, #tabRete .ui-widget-header {
background: #d2232a;
color: #000000;
font-weight: bold;
}
.ui-tabs .ui-tabs-nav {
list-style: none;
position: relative;
padding: .6em .2em 0;
}
.ui-widget-header {
border: 0;
color: #ffffff;
font-weight: bold;
height: 22px;
}

另外，我无法弄清楚为什么它在下方菜单上这样做但上面的菜单是正确的？

Answer 1

你需要设置list-style：none;到列表中的LI元素。试试这个：

ul.ui-tabs-nav li { list-style:none; }

Answer 2

在CSS中添加此类

.ui-tabs ul, .ui-tabs ul li
{
 list-style:none;
}

Answer 3

尝试

.ui-tabs ul{
list-style-type:none;
}