浏览器之间的渲染问题

编程问答 2022-04-26

问题描述

| 首先，大约一个星期前，我像疯子一样不停地开始学习html＆css，因此我决定标记几年前创建的设计。我知道html和css出现问题，但是我只是开始尝试使用最佳做法。我可能还可以使用更多速记。无论如何，我正在继续。 我认为的问题是，我一直在使用绝对定位。经过大量的故障排除后，我在同一页面上安装了Firefox和Chrome。但是，我认为我的布局不是流动的，因此在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;      
}
    

解决方法

        祝学习好运，这一切都将在实践中实现，而IE是每个人的痛苦，所以这也是正常的：） 您可以做的第一件事是养成始终在CSS文件的顶部放置“重置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/     
浏览器浏览器渲染渲染问题问题