当前位置： 文江博客话题详情

Opera 布局问题在小提琴中有效，但在实时网站中无效 - 如何

发布于 2024-11-01 13:31:56 字数 7357 浏览 3 评论 0原文 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Look Around You</title>
</head>
<body>
    <div id="fade"></div>
    <div id="wrapper">

    <div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="search">
            <input type="text"/>
            <input type="button" value="search"/>
        </div>
        <p class="clear"/>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>
            <ul class="horLeft">
                 <li><a class="tags" href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li ><a class="contact" href="#">CONTACT</a></li>
            </ul>
            <ul class="horRight">
                 <li><a class="hello" href="#">HELLO</a></li>
            </ul>

        </div>
    </div>

        <div id="posts">
            <p></p>
        </div>
        <div id="verNav">
            <p></p>
            <div id="category">
                <ul></ul>
            </div>
            <div id="country">
                <ul></ul>
            </div>
        </div>
        <div id="adverts">
            <p>adverts</p>
        </div>

        <div id="footer">
            <ul class="horNav">
                <li class="horNav"><a href="#">TOP</a></li>
            </ul>
        </div>

    </div>
</body>
</html>

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
    margin:0;
    padding:0;
    font: 12px arial,helvetica,verdana,sans-serif;
    color:black;
    list-style: none;
    text-decoration: none;
    text-align: left;
}
body{
    text-align: center;
}

html{
    overflow-y: scroll;
}
    #wrapper{
        width:85%;
        margin:0 auto;
        min-width:720px;
        max-width:1000px;
    }
/*    #header, #logo, #category,#country{
        width: 100%;
        float:left;
    }*/
    #header{
        margin-top: 15px;
        width: 100%;
}
    #logo{
     max-width: 400px;
     float: left;
    }
    #search{
        float: right;
        max-width: 200px;
    }


    #horNav{
    border-bottom: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    padding: 2px 0;
    overflow: hidden;
    display: block;
    width: 100%;
    }

    input{
        display: inline;
}


#posts{
    width:50%;
    max-width: 522px;
    z-index: 200;
}
div.post{
    position: relative;
}
#verNav{
    width:20%;
    margin:0 2%;
    max-width: 130px;
}

#adverts{
    width:25%;
}
#posts,#verNav,#adverts{
    float:left;
}

#posts div.post,#verNav div, #adverts div{
    margin-top:25px;
}

#posts embed, #posts object{
    width: 100%;
    max-width: 512px;
    height: 288px;
}
#pages{
    display: block;
    overflow: hidden;
    width: 100%;
}

#footer{
    width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
    clear:both;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

#mysql{
    margin-top: 20px;
}

#mysql label{
    float: left;
    width: 100px;
}

#mysql label,#mysql input{
    font-size: 14px;
    margin-bottom: 4px;
}
#mysql input{
    border:1px solid black;
}
#mysql input:textarea{
    width: 150px;
}
.clear{
    clear: both;
}


#logo h1 a{
    font-style:italic;
    text-decoration: none;
    font-size: 44px;
}

    #horNav a{
/*        background: black;*/
    }

#category{
    display: none;
}

#verNav p{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}


#verNav li{
    /*padding: 1px 0;
    border-top: 1px #b8baba solid;*/

}

#verNav ul{
/*    margin-right: 75px;*/
/*    border-bottom: 1px #b8baba solid;*/

}

#verNav a, #verNav li{
    font-family: 'QuicksandBook';
    font-size: 13px;
    color:#6b6f70;
}
#verNav li{
        margin-bottom:1px;
}
#verNav p{
font-family: 'QuicksandBook';
    font-size: 13px;
color:#14b2c3;


}

    .horNav li{
        float:left;
        border-right:2px solid #e6e6dc;
    }

    .horLeft{
        float: left;
    }

    .horRight{
        float: right;
}

    .advertisment li{
        float:right;
        border-left:2px solid #e6e6dc;
    }

    #horNav a,#footer a{
        display:block;
        padding:3px 3px;
        -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     border-radius: 20px;
/*        color:white;*/
font-family: HELVETICA NEUE;
        font-size: 18px;
/*        height: 37px;*/
    }

    #horNav li, #footer li{
        padding: 0 2px;
}

    #horNav a:hover, #footer a:hover{
        background:#e6e6dc;
    }
    .home{
        color: #e23598;
}
.submit{
    color: #ffd236;
}
.tags{
    color: #a5c43a;
}
.hello{
    color: #ffd236;
}
.contact{
    color: #a5c43a;
}
#verNav a:hover{
    background: #e6e6dc;
}

iframe{
    border: none;
    font-size: 14px;
}

#posts div{
    border-bottom: 2px black solid;
    margin-bottom: 20px;
}

#posts iframe{
    border: none;
    width:100%;
    height:288px;
    max-width: 512px;
}

.title{
    font-size: 20px;
    font-family: 'QuicksandBold';
    color: #6b6f70;
}

.description{
    font-family: HELVETICA NEUE;
    font-size: 14px;
    border-bottom: 1px grey dotted;
    margin-top: 14px;
    padding-bottom: 5px;
    text-align: justify;
}

.info{
    font-family: HELVETICA NEUE;
    font-size: 14px;
color: #6b6f70;
    padding: 5px 0;
}

.category,.country{
        font-family:helevetica neue;
        font-size:14px;
color: #6b6f70;


}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    background: #5f5f5f;
    z-index: -100;
    width: 100%;
    height: 100%;
    opacity:0;
}

FIDDLE 版本
实时版本

PS 我说的是在我的实时版本中 div#search 位于 div#logo 下，但在 jsfiddle 中工作正常？有问题的浏览器 OPERA。

非常感谢

原文 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Look Around You</title>
</head>
<body>
    <div id="fade"></div>
    <div id="wrapper">

    <div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="search">
            <input type="text"/>
            <input type="button" value="search"/>
        </div>
        <p class="clear"/>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>
            <ul class="horLeft">
                 <li><a class="tags" href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li ><a class="contact" href="#">CONTACT</a></li>
            </ul>
            <ul class="horRight">
                 <li><a class="hello" href="#">HELLO</a></li>
            </ul>

        </div>
    </div>

        <div id="posts">
            <p></p>
        </div>
        <div id="verNav">
            <p></p>
            <div id="category">
                <ul></ul>
            </div>
            <div id="country">
                <ul></ul>
            </div>
        </div>
        <div id="adverts">
            <p>adverts</p>
        </div>

        <div id="footer">
            <ul class="horNav">
                <li class="horNav"><a href="#">TOP</a></li>
            </ul>
        </div>

    </div>
</body>
</html>

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
    margin:0;
    padding:0;
    font: 12px arial,helvetica,verdana,sans-serif;
    color:black;
    list-style: none;
    text-decoration: none;
    text-align: left;
}
body{
    text-align: center;
}

html{
    overflow-y: scroll;
}
    #wrapper{
        width:85%;
        margin:0 auto;
        min-width:720px;
        max-width:1000px;
    }
/*    #header, #logo, #category,#country{
        width: 100%;
        float:left;
    }*/
    #header{
        margin-top: 15px;
        width: 100%;
}
    #logo{
     max-width: 400px;
     float: left;
    }
    #search{
        float: right;
        max-width: 200px;
    }


    #horNav{
    border-bottom: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    padding: 2px 0;
    overflow: hidden;
    display: block;
    width: 100%;
    }

    input{
        display: inline;
}


#posts{
    width:50%;
    max-width: 522px;
    z-index: 200;
}
div.post{
    position: relative;
}
#verNav{
    width:20%;
    margin:0 2%;
    max-width: 130px;
}

#adverts{
    width:25%;
}
#posts,#verNav,#adverts{
    float:left;
}

#posts div.post,#verNav div, #adverts div{
    margin-top:25px;
}

#posts embed, #posts object{
    width: 100%;
    max-width: 512px;
    height: 288px;
}
#pages{
    display: block;
    overflow: hidden;
    width: 100%;
}

#footer{
    width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
    clear:both;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

#mysql{
    margin-top: 20px;
}

#mysql label{
    float: left;
    width: 100px;
}

#mysql label,#mysql input{
    font-size: 14px;
    margin-bottom: 4px;
}
#mysql input{
    border:1px solid black;
}
#mysql input:textarea{
    width: 150px;
}
.clear{
    clear: both;
}


#logo h1 a{
    font-style:italic;
    text-decoration: none;
    font-size: 44px;
}

    #horNav a{
/*        background: black;*/
    }

#category{
    display: none;
}

#verNav p{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}


#verNav li{
    /*padding: 1px 0;
    border-top: 1px #b8baba solid;*/

}

#verNav ul{
/*    margin-right: 75px;*/
/*    border-bottom: 1px #b8baba solid;*/

}

#verNav a, #verNav li{
    font-family: 'QuicksandBook';
    font-size: 13px;
    color:#6b6f70;
}
#verNav li{
        margin-bottom:1px;
}
#verNav p{
font-family: 'QuicksandBook';
    font-size: 13px;
color:#14b2c3;


}

    .horNav li{
        float:left;
        border-right:2px solid #e6e6dc;
    }

    .horLeft{
        float: left;
    }

    .horRight{
        float: right;
}

    .advertisment li{
        float:right;
        border-left:2px solid #e6e6dc;
    }

    #horNav a,#footer a{
        display:block;
        padding:3px 3px;
        -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     border-radius: 20px;
/*        color:white;*/
font-family: HELVETICA NEUE;
        font-size: 18px;
/*        height: 37px;*/
    }

    #horNav li, #footer li{
        padding: 0 2px;
}

    #horNav a:hover, #footer a:hover{
        background:#e6e6dc;
    }
    .home{
        color: #e23598;
}
.submit{
    color: #ffd236;
}
.tags{
    color: #a5c43a;
}
.hello{
    color: #ffd236;
}
.contact{
    color: #a5c43a;
}
#verNav a:hover{
    background: #e6e6dc;
}

iframe{
    border: none;
    font-size: 14px;
}

#posts div{
    border-bottom: 2px black solid;
    margin-bottom: 20px;
}

#posts iframe{
    border: none;
    width:100%;
    height:288px;
    max-width: 512px;
}

.title{
    font-size: 20px;
    font-family: 'QuicksandBold';
    color: #6b6f70;
}

.description{
    font-family: HELVETICA NEUE;
    font-size: 14px;
    border-bottom: 1px grey dotted;
    margin-top: 14px;
    padding-bottom: 5px;
    text-align: justify;
}

.info{
    font-family: HELVETICA NEUE;
    font-size: 14px;
color: #6b6f70;
    padding: 5px 0;
}

.category,.country{
        font-family:helevetica neue;
        font-size:14px;
color: #6b6f70;


}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    background: #5f5f5f;
    z-index: -100;
    width: 100%;
    height: 100%;
    opacity:0;
}

FIDDLE VERSION
LIVE VERSION

P.S. I'm talking about div#search being positioned under div#logo in my live version, but works properly in jsfiddle? browser in question OPERA.

many thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

￠蛋碎的人ぎ生 2024-11-08 13:31:56

JSFiddle 会忽略您的 Doctype 并使用 HTML 5 Doctype。这会触发标准模式。

您的 Doctype（没有 URI 的 HTML 4 Transitional）会触发 Quirks 模式。

如果您想使用 Transitional，请使用规范中指定的 Doctype，而不是您的缩写。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

JSFiddle ignores your Doctype and uses the HTML 5 Doctype. This triggers standards mode.

Your Doctype (HTML 4 Transitional with no URI) triggers Quirks mode.

If you want to use Transitional, use the Doctype specified in the specification and not your abbreviated one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
回复 原文
~没有更多了~

关于作者

小伙你站住

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文