首先,大约一周前,我像个疯子一样不停地学习html和css,我决定标记一个几年前创建的设计。我知道我的html和css有问题,但我只是开始尝试使用最佳实践。我可能还需要更多的速记。不管怎样,我还是漫无目的地继续。
我想问题是,我一直在使用的绝对定位。经过相当多的故障排除,我把火狐和Chrome放在同一个页面上。不过,我不认为我的布局是流动的,所以在铬,当我与cmd+缩放,一切都完全不正常。Firefox没有问题。而IE本身就是另一个怪物。到处都是东西。真让人不安。
这把我逼疯了。当事情不按你所希望的方式进行时,这是一个很艰难的过程,但我喜欢学习网页设计。如果有人能帮忙,我们将不胜感激。我把代码贴在下面。。。
HTML格式:

<body>
<div id="main">
    <div class="container">

        <div id="header">
                <div id="searchBar">
                <form action=""> <small>Search</small> <input type="text" name="search" /></form></div>
                <div id="logo">
                    <h1><a href="">Hell, Michigan<a/></h1>
                </div>
            <div id="menu">
                <ul>
                    <li><a href="" class="active">Home</a></li>
                    <li><a href="">Things To See & Do</a></li>
                    <li><a href="">Where To Stay</a></li>
                    <li><a href="">Plan Your Trip</a></li>
                    <li><a href="">History</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div> <!--menu-->
        </div> <!--header-->

        <div id="mainContent">
            <img src="images/main_content.png" width="791" height="209" alt="must see must do" />
        </div>

        <div id="attractions">
            <ul>
                <li id="chapel">
                <h2><a href="" title="Get Hitched in Hell!">Hell Wedding Chapel</a></h2>
                <p>A marriage made in hell can only get better. Tie the knot in Hell's very own
                Wedding Chapel, or renew your vows before hell freezes over!</p></li>

                <li id="run">
                <h2><a href="" title="Run for your lives!">Run Thru Hell</a></h2>
                <p>Not everyone can say that they've run thru hell. Partake in Hell's classic 5 or
                10 mile race, and get a T-shirt that says, <q>I ran thru hell!</q></p></li>

                <li id="lastRides">
                <h2><a href="" title="Your Last Ride Awaits!">Last Rides Reunion</a></h2>
                <p>The annual Last Rides Reunion is a must see event in late September. Witness over 40
                hearses drive through town. Will this be your last ride?</p></li>
            </ul>
        </div> <!--main content-->

        <div id="subContent">
            <img src="images/sub_content.png" width="791" height="156" alt="choose activity" />
        </div>

        <div id="activities">
            <ul>
                <li id="activitiesOne">
                <h3><a href="" title="Picnic or Hike in Hell!">Picnic or Hike</a></h3></li>

                <li id="activitiesTwo">
                <h3><a href="" title="Canoe or Bike in Hell!">Canoe or Bike</a></h3></li>
            </ul>
        </div> <!--sub content-->

        <div id="socialContent">
            <h4>Connect with us</h4>
            <ul>
                <li id="twitter">
                <h5><a href="">Hell Michigan on Twitter</a></h5></li>

                <li id="facebook">
                <h5><a href="">Hell Michigan on Facebook</a></h5></li>

                <li id="youtube">
                <h5><a href="">Hell Michigan on YouTube</a></h5></li>
            </ul>
        </div> <!--social content-->

        <div id="footer">
            <p>&copy; Hell Michigan &nbsp;&nbsp;
                <a href="privacy.htm">Privacy Policy</a> |
                <a href="terms.htm">Terms and Conditions</a>
            </p>
        </div> <!--footer-->
    </div> <!--containter-->
</div> <!--main-->
</body>
</html>

CSS:
/*
    Hell Michigan Demo Page
    Design & Markup by Khoi Nguyen
*/

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Rockwell, Georgia, serif;
    background-color: #fff;
    margin: 0;
    padding: 0;
}



#menu a {
    color: #fff
}

#main {
    width: 791px;
    margin: 0 auto;
    background: #fff;
    position: relative;
}

#header {
    height: 118px;
    background-color: #fff;
}

/*
    Search-Bar
*/

#header #searchBar {
    position: absolute;
    left: 595px;
    top: 20px;
}

#logo a:link {
    height: 45px;
    width: 478px;
    display: block;
    text-indent: -9999em;
    background: url(../images/logo.png) no-repeat left bottom;
    border: 0;
    padding: .3em .3em;
    margin: 0 .3em;
}

/*
    Navigation
*/

#header #menu {
    left: 791px;
    bottom: 0px;
}

#menu ul {
    color: #fff;
    list-style-type: none;
    font-family: Helvetica, sans-serif;
    font-size: 1.5ex;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 12px;
    margin-left: 5px;
    padding: 0 1px 0 0;
    text-align: center;
}

#menu li {
    float: left;
    margin: 0;
    padding: 0;
}

#menu li a:link {

    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 0 0 0;
    margin-right: 1px;
    width: 139px;
    line-height: 31px;
    background: url(../images/navigation_dual.jpg) no-repeat left bottom;
    border: none;
}

#menu li a:hover {
    color: #000;
    background-position: left top;
}

#menu li a.active {
    height: 31px;
    width: 80px;
    display: block;
    color: #000;
    background: url(../images/home.jpg) no-repeat;
}

#menu li a.active {
    cursor: default;
}

/*
    Main-Content
*/

#mainContent img {
    position: relative;
    margin-top: .5em;
}

#attractions ul  #chapel a:link {
    position: absolute;
    top: 129px;
    left: 328px;
    width: 151px;
    height: 201px;
    margin: 0;
    padding: 0;
    background: url(../images/chapel_dual.png) no-repeat left bottom;
    text-indent: -9999em;
}

#attractions ul #chapel a:hover {
    background-position: left top;
}

#attractions ul  #run a:link {
    position: absolute;
    top: 129px;
    left: 482px;
    width: 151px;
    height: 201px;
    margin: 0;
    padding: 0;
    background: url(../images/run_dual.jpg) no-repeat left bottom;
    text-indent: -9999em;
}

#attractions ul #run a:hover {
    background-position: left top;
}

#attractions ul  #lastRides a:link {
    position: absolute;
    top: 129px;
    left: 636px;
    width: 151px;
    height: 201px;
    margin: 0;
    padding: 0;
    background: url(../images/last_rides_dual.jpg) no-repeat left bottom;
    text-indent: -9999em;
}

#attractions ul #lastRides a:hover {
    background-position: left top;
}

#attractions ul {
    list-style: none;
    overflow: auto;
}

#chapel p {
    position: absolute;
    font-size: .8em;
    color: gray;
    top: 340px;
    left: 328px;
    width: 142px;
    height: 30px;
    margin: 0;
    padding: 0;
    z-index: 1;
}

#run p {
    position: absolute;
    font-size: .8em;
    color: gray;
    top: 340px;
    left: 482px;
    width: 142px;
    height: 30px;
    margin: 0;
    padding: 0;
    z-index: 1;
}

#lastRides p {
    position: absolute;
    font-size: .8em;
    color: gray;
    top: 340px;
    left: 636px;
    width: 142px;
    height: 30px;
    margin: 0;
    padding: 0;
    z-index: 1;
}

/*
    Sub-Content
*/

#activities ul {
    list-style: none;
}

#subContent img {
    position: relative;
    margin-top: 106px;
}

#activities ul  #activitiesOne a:link {
    position: absolute;
    top: 448px;
    left: 4.5px;
    width: 197px;
    height: 148px;
    margin: 0;
    padding: 0;
    background: url(../images/picnic_hike_dual.png) no-repeat left bottom;
    text-indent: -9999em;
}

#activities ul #activitiesOne a:hover {
    background-position: left top;
}

#activities ul  #activitiesTwo a:link {
    position: absolute;
    top: 448px;
    left: 209px;
    width: 304px;
    height: 148px;
    margin: 0;
    padding: 0;
    background: url(../images/canoe_bike_dual.png) no-repeat left bottom;
    text-indent: -9999em;
}

#activities ul #activitiesTwo a:hover {
    background-position: left top;
}

最佳答案

祝你学习顺利,这一切都会随着练习而发生
首先,你可以养成习惯,总是在你的css文件的最上面放一个“reset css”代码-这里有一个非常好的你可以使用:
http://developer.yahoo.com/yui/reset/#code
它的作用是让所有的浏览器在显示内容时都在“同一个页面”上。
然后,我建议您尝试从空白页面开始,逐个添加元素,并检查每个元素在所有浏览器中的行为是否正确,并根据需要进行调整。最终,您将开始本能地编写代码,知道如何以正确的方式做事,并且需要更少的检查。
还有一件事很多开发人员都会做:选择你的“主浏览器”,即你将要开发的浏览器,确保它看起来不错,然后检查并调整其他浏览器的东西。为了让这种方法有意义,您的主浏览器需要是一个现代化的、符合标准的浏览器,比如Firefox(Safari和Chrome也可以)。然后你为IE开发最后一个,因为它预计会表现不好,需要特殊处理(你可以使用条件注释:http://www.quirksmode.org/css/condcom.html
另一个有用的链接,可以修复您将遇到的问题:
http://www.positioniseverything.net/
要了解有关液体布局的更多信息,请查看:
http://www.cssliquid.com/

关于html - 浏览器之间的渲染问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6172863/

10-11 23:24
查看更多