Question

我在较低版本的IE上设计网页时遇到了麻烦。我想显示此输出，但它不适用于IE7及以下版本。这是链接：http://jsfiddle.net/he6ra/

我尝试添加*，但它没有帮助。

我使用IE11的开发工具以较低版本预览/显示它。

这就是我所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type='text/css'>
    *, body, table, tr, td, div, a, span{
        font-family: Tahoma;
        color: inherit;
        font-size: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        line-height: 15px;
        cursor: default;
    }

    body { 
        background-color: #f1f1f1;
        color: #000000;
        min-width: 960px;
        max-height: 100%;
        font-size: 14px;
        background: url() repeat scroll;
    }

    a, a:visited {
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    #banner {
        display: block;
        position: relative;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    #banner .sub {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        height: 120px;

        /* IE */
        background-color:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99010101,endColorstr=#99010101); 
      zoom: 1;

        /* DEFAULT */
        background-color: rgba(1,1,1,.6);

        border-bottom: 2px solid #b30;
        color: #f0f0f4;
    }

    #banner .sub table {
        height: 100%;
    }

    #banner .sub table tr td p {
        font-size: 17px;
        line-height: 20px;
    }

    #mainNav {
        display: block;
        position: relative; 
        margin-left: auto;
        margin-right: auto;
        width: 960px;

        /* IE */ 
        background-color: transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000); 
        zoom: 1;

        /* DEFAULT */
        background-color: rgba(0,0,0, .8);

        overflow: hidden;
    }

    #mainNav * {
        background-color: transparent;
    }

    #mainNav ul {
        list-style: none;
    }

    #mainNav ul li {
        display: inline;
        zoom: 1;
        text-align: center;
    }


    #mainNav ul li.active a {
        color:  #F04100;
        border-bottom: solid 2px #e9a1f0 /* #992900; */
    }

    #mainNav ul li a {
        display: inline-block;
        padding: 20px;
        color: #FFA77C /* #CADEF1 */;
        font-size: 15px;
    }

    #mainNav ul li a:hover {
        text-decoration: none;
        /* background-color: rgba(216,100,34,.05); */
        /* color: #F04100  #F1DECA; */
    }

    #content {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding-bottom: 18px;
        z-index: 1;
    }
    #content .sub {
        /* background: rgba(34, 08, 19, .8) url();*/
        background: url(iconbg_2.png);
        border-bottom: 2px solid #d75100;
        padding: 10px;


        /* background-color: rgba(34, 08, 19, .2); */
        /*
        z-index: 1;
        border-left: 2px solid black;
        border-right: 2px solid black;
        background-color: #220813;
        color: #f0f3c0; 
        background: url() repeat scroll;
        */
    }

    #footer {
        position: fixed;
        width: 100%;
        bottom: 0px;
        z-index: 1;
    }

    #footer .sub {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        border-top: 2px solid #d75100;
        background-color: #000;
        color: #444;
    }

    #footer div .shortLinks {
        float: right;
        padding: 1px;
    }
    #footer div .shortLinks a {
        font-family: Trebuchet MS;
        font-size: 11px;
        color: #fcfefd;
    }

    #footer div .userButtons {
        float: left;
    }

    .b {
        font-weight: bold;
    }

    .fr {
        float: right;
    }

</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
</head>
<body>
    <div id="banner">
        <div class="sub">
            <table cellpadding="1" cellspacing="1" border="0">
                <tr>
                    <td>&nbsp;</td>
                    <td valign="middle">
                        <img alt="" src="" />
                    </td>
                    <td>&nbsp;</td>
                    <td>
                        <p class="b">Contoso</p>
                        <p>Online Leave</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="mainNav">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Leave Application</a></li>
            <li><a href="#">Leave Status</a></li>
            <li class="fr"><a href="#">Logout</a></li>
            <li class="fr"><a href="#">Update</a></li>
        </ul>   
    </div>
    <div id="contentFrame"></div>
    <div id="content">
        <div class="sub">
            <p>Start</p>
            <script>
                for(var a = 0; a<10; a++){
                    document.write("<p>" + a + " the quick brown fox jumps over the lazy dog</p>");
                }
            </script>
            <p>End</p>
        </div>
    </div>
    <div id="footer">
        <div class="sub">
            <div class="userButtons">
                <table cellpadding="1" cellspacing="1" border="0">
                    <tr><td><span class="ui-icon"></span></td></tr>
                </table>
            </div>
            <div class="shortLinks">
                <table cellpadding="1" cellspacing="1" border="0"><tr>
                <td><a href="#">Some Links</a></td>
                <td>|</td>
                <td><a href="#">Online Leave</a></td>
                <td>|</td>
                <td><a href="#">Report</a></td>
                <td>&nbsp;</td>
                </tr></table>
            </div>
        </div>
    </div>
</body>
</html>

这就是它在IE7上的样子 This is what it looks like on IE7

我希望它看起来像 Where I want it to look like

Answer 1

这是一个更新的JSFiddle： http://jsfiddle.net/he6ra/2/

你漂浮了＆lt;＆lt;＆lt; li＆gt;

我也做了所有链接：

#mainNav ul li a {
    display: block;
}

我还使你的.fr课更具体：

#mainNav ul li.fr {
    float: right;
}

Answer 2

#mainNav ul li {
   display: inline-block;
   float: left;
  text-align: center;
}

（或）

 #mainNav ul li {
   border: 1px solid red;
   display: inline;
   margin-right: 5px;
   text-align: center;
   white-space: nowrap;
 }

Answer 3

#mainNav ul li {
   display: inline;
   float: left;
   padding:0 15px;
   line-height:50px
}

如何应用float：left和display：内联IE的较低版本？

3 个答案: