Question

我有一个问题让我的网站在IE9和earleir中正常工作（它在IE10和FireFox中工作正常）。问题是，在访问主页（或导航栏链接到的任何页面）时，每个导航栏链接都列在另一个上面而不是并排。奇怪的是，一旦在主页上点击搜索按钮，一切都开始正常工作。

我搜索过该网站并尝试了推荐的建议，例如更改文件中元标记的内容，但无济于事。

编辑：有人建议我添加屏幕截图，但我无法这样做，因为我还没有足够的声誉点。

要包含在导航栏中的HTML文件：

//<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE10'/>
<link rel="stylesheet" href='jsddm.css'>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$(function(){

  $("ul.jsddm li").hover(function(){
    $('ul:first',this).css('visibility', 'visible');

     }, function(){
    $('ul:first',this).css('visibility', 'hidden');

     });

   });
</script>



<ul class="jsddm">
<li><a href="home"><img src="./styles/icons/sitelogolowres.png"> APPraisal</a>
<li><a href="#">OS</a>
    <ul>
        <li><a href="#">Android</a></li>
        <li><a href="#">iOS</a></li>
    </ul>
</li>
<li><a href="#">Rating</a>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</li>
<li><a href="login">Login</a></li>
<li><a href="register">Register</a></li>
</ul>

</div>
<br/><br/>

CSS文件：

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 2.0em;

}

ul.jsddm a
    {
    color: #FFF;
    background-color: #333;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
}

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 20%;
}

ul.jsddm li ul li
{
    list-style:none;
}

ul.jsddm ul
{
    position: absolute;
    width: 100%;
    top: 33px;
    padding: 0;
    visibility: hidden;
}

Answer 1

试试这个

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
    ul.jsddm, ul.flyout
    {
        margin: 0;
        padding: 0;
        line-height: 2.0em;
        list-style-type:none;
    }
    ul.jsddm li
    {
        float: left;
        width: 19%;
        position:relative;
    }
    ul.jsddm a
    {
        color: #FFF;
        background-color: #333;
        border: 1px solid #444;
        display: block;
        text-decoration: none;
        text-align: center;
        width: auto;
    }
    ul.flyout li
    {
        width: 100%;
        display:block;
        float:none;
    }
    ul.jsddm a:hover
    {
        color: #000;
        background-color: #FFF;
    }
    ul.flyout
    {
        display:none;
        position:absolute;
        top:34px;
        left:0px;
        width:100%;
    }
    ul.jsddm li:hover ul.flyout
    {
        display:block;
    }
</style>
</head>
<body>

<div>
    <ul class="jsddm">
        <li><a href="home">APPraisal</a>
        <li><a href="#">OS</a>
            <ul class="flyout">
                <li><a href="#">Android</a></li>
                <li><a href="#">iOS</a></li>
            </ul>
        </li>
        <li><a href="#">Rating</a>
            <ul class="flyout">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="login">Login</a></li>
        <li><a href="register">Register</a></li>
    </ul>
</div>
</body>
</html>

我已将下拉菜单更改为CSS。主要问题是ul.jsddm＆gt; li，它只对第一个li设置样式并且具有没有默认li样式的问题

IE 9及以下版本无法正确呈现网站（CSS / HTML）

1 个答案: