IE中没有显示的大纲和边框

时间:2014-10-20 15:15:53

标签: html css border outline

过去一周我一直坚持这一点,无法找到解决方案。我一直用chrome开发我的网站,但是注意到边框和轮廓不适用于IE。我已经尝试更换html doc类型和页面的开头,因为其他人已经为它修复了它,但它对我不起作用。无论如何,这是我的一个页面的代码:

HTML:     

 <html>

    <head>

        <title>Project Star in a Jar</title>
        <link rel="stylesheet" type="text/css" href="default.css"/>

    </head>

    <link rel="shortcut icon" href= "images/favicon.png"/>
    <link rel="icon" href="images/favicon.png" type="image/x-icon">

    <body>

        <div class="wrapOverall">

            <div class="header">

                <div class="logo">
                    <img src="images/starJar.png" href="index.php" style="width:100px;height:100px">
                        <div class="moto">
                            <h1> Project Star in a Jar</h1>
                        </div>
                </div>

                <div class="nav_main">

                        <ul>
                            <!--These are all the tabs at the top of the page <li><a href="link">title displayed on page</a></li>-->
                            <li><a href="index.php">Home</a></li>
                            <li><a href="tutorial/intro.php">Tutorial</a></li>
                            <li><a href="videos.php">Videos</a></li>
                            <li><a href="resources.php">Other Resources</a></li>

                        </ul>

                </div>

            </div>

            <div class="Content">

                <div class="contentResource">

                    <div class="resourceTitle">

                        <h2>Resources</h2>

                    </div>

                    <div class="resourceLinks">

                        <div class="webTitle">

                            <h3>Website Links</h3>

                        </div>

                        <ul>

                            <li><a href="http://www.iter.org" target="_blank">ITER (International Fusion Project)</a></li>
                            <li><a href="http://www.fusor.net" target="_blank">Fusor.net (Open Source Fusor Research Consortium) </a></li>
                            <li><a href="http://www.farnovision.com/chronicles/fusion/vassilatos.html" target="_blank">FarnoVision.com (Information About Farnsworth)</a></li>
                            <li><a href="http://www.kronjaeger.com/hv-old/fusor/fusorIII/index.html#xray" target="_blank">Richard Hulls Fusor III Project (Homebuilt Fusion Project Log)</a></li>
                            <li><a href="http://www.rtftechnologies.org/physics.htm" target="_blank">RTF Technologies (Several Homebuilt Fusion Projects)</a></li>
                            <li><a href="http://www.plasma.inpe.br/LAP_Portal/LAP_Site/Text/Fusion_Plasma.htm" target="_blank">Associated Plasma Laboratory (Information About Plasma)</a></li>

                        </ul>

                    </div>

                    <div class="resourceDocs">

                        <div class="docTitle">

                            <h3>Documents</h3>

                        </div>

                        <ul>

                            <li><a href="#">PDF Tutorial: Star in a Jar </a></li>
                            <li><a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=http%3A%2F%2Ffusor.net%2Fnewbie%2Ffiles%2FFUSORREF.DOC&ei=ArkkVJ-qN8zgsASw24DABg&usg=AFQjCNGbzj75ePypkL_TZ5u_hwdVceXmMQ&sig2=J4dBsxChmf4L7YWFHs7bSg&bvm=bv.76247554,d.cWc" target="_blank">DOC Fusor & Fusion References (Fusor.net)</a></li>
                            <li><a href="http://www.fusor.net/newbie/files/Ligon-QED-IE.pdf" target="_blank">PDF The World's Simplest Fusion Reactor, and How to Make it Work</a></li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <div class="footer">
            <a>
                Copyright @ 2014 Project Star In A Jar. All Rights Reserved.<br>
                Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
           </a>

        </div>


    </body>

</html>

CSS:

   /*########################*/
    /* General HTML Tag Rules */
    /*########################*/

    body {
        background-position:top;
        background-attachment:fixed;
        background-image: url('images/bg.jpg');
        background-size: cover;
    }

    /*##############################*/
    /* General Template Class Rules */
    /*##############################*/

    .wrapOverall {
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
        border:2px solid#EE8E08;
        background-image: url('images/bg5.jpg');
        background-repeat: repeat-y;
    }

    .logo{
        margin-top: -3px;
        margin-left: -3px;
    }

    .logo img {
        border:3px solid#EE8E08;
    }

    .moto{
        margin-left: 110px;
        margin-top: -120px;
        color: #FFFFFF;
        text-shadow: 0 0 15px #CC2EFA;
    }

    .footer {
        text-align: center;
        margin-top:20px;
        font-size:14px;
        color: #FFFFFF;
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer a {
        color: inherit;
        text-decoration: none;
    }

    /*##########################*/
    /* General Navigation Rules */
    /*##########################*/

    .header {
        height: 100px;
        position: relative;
    }

    .headerHome {
        height: 100px;
        padding-bottom: 90px;
        position: relative;
    }

    .nav_main {
        margin-top: 10px;
        margin-left:96px;
        background-color: #D8D8D8;
    }

    .nav_main ul {
        margin:0px;
        padding:0px;
        padding:5px 18px;
    }

    .nav_main ul li {
        margin:0px;
        padding:px;
        list-style:none;
        display:inline;
    }

    .nav_main ul li a {
        margin:0px;
        padding:5px 18px;
        color:#000000;
        text-decoration:none;
        font-weight:900;
        font-size:17px;
        text-transform:normal;
        outline:2px solid#00000;
    }

    .nav_main ul li a:hover{
        text-decoration:underline;
        color:#00000;
        background-color:#EE8E08;
    }
        /*############################*/
        /* General Resource Formatting*/
        /*############################*/

        .contentResource {
            width:714px;
            margin-left: 200px;
            text-indent: 50px;
            border: 1px solid#FFFFFF;
            margin-top:30px;
            margin-bottom:30px;
        }

        .resourceTitle {
            text-align: center;
            margin-left:-45px;
            color: #FFFFFF;
        }

        .webTitle {
            color: #FFFFFF;
        }

        .docTitle {
            color: #FFFFFF;
        }

        .resourceLinks ul {
            list-style: none;
            margin-left:-30px;
        }

        .resourceDocs ul {
            list-style: none;
            margin-left:-30px;
        }

        .resourceLinks ul li a {
            color:#EE8E08;
        }

        .resourceDocs ul li a{
            color:#EE8E08;
        }

1 个答案:

答案 0 :(得分:0)

在摆弄代码之后,我想通了。我在边框实体和颜色代码之间没有空格。

此:

border: 1px solid#FFFFFF;

需要看起来像这样:

border: 1px solid #FFFFFF;

希望这有助于遇到同样问题的其他人!