Question

我现在已经验证了html＆amp;使用w3的css，但是当我尝试在不同的屏幕分辨率下测试它时，底部横幅总是向上移动到内容区域。当我在Internet Explorer 8中安装了所有工具栏时，也会发生这种情况。在使用我的1280x1024显示器的Firefox中似乎工作得更好。我知道这是一个CSS问题，但无法纠正它。在这件事上得到一些帮助会很好。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<!-- saved from url=(0017)http://localhost/ -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>My Test Site</title>
<meta content="" name="description">
<meta content="," name="keywords">
<meta content="index, nofollow" name="robots">
<meta content="" name="google-site-verification">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="favicon.png" rel="icon" type="image/png"><!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"      
<type="text/javascript">
</script>
<script src="js/jquery.scrollTo-1.4.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {

    $('a.panel').click(function () {

            $('a.panel').removeClass('selected');
            $(this).addClass('selected');

            current = $(this);

            $('#wrapper').scrollTo($(this).attr('href'), 50);              

            return false;
    });

    $(window).resize(function () {
            resizePanel();
    });

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
    }        
</script>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div class="item" id="item1"><a class="img" href="/"><img alt=""   
id="logo" name="logo" src="http://i50.tinypic.com/nghgg.png"></a>
<div id="top_banner"><script type="text/javascript">
                pb_cid='BAYBANNER468X60_1';
                pb_type='banner_468x60';
</script> <script src="http://clkads.com/banners/script/include_img_banner.js"    
type="text/javascript">
</script></div>
<div id="navwrapper">
<ul class="floatleft" id="nav">
<li><a href="#">Home</a></li>
</ul>
<br class="clear"></div>
<div id="left_banner"><script type="text/javascript">
                pb_cid='BAYBANNER120X600_1';
                pb_type='banner_120x600';
</script> <script src="http://clkads.com/banners/script/include_img_banner.js"  
type="text/javascript">
</script></div>
<div class="content">
<div id="right_banner"><script type="text/javascript">
                    pb_cid='BAYBANNER120X600_1';
                    pb_type='banner_120x600';
</script> <script src="http://clkads.com/banners/script/include_img_banner.js"   
type="text/javascript">
</script></div>
<div id="bottom_banner"><script type="text/javascript">
                    pb_cid='BAYBANNER728X90_2';
                    pb_type='banner_728x90';
</script><script src="http://clkads.com/banners/script/include_img_banner.js" 
type="text/javascript">
</script></div>
<div class="right_arrow"><a class="panel" href="#item2"><img alt="arrow" height="24"   
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div>
<div id="footer">Copyright 2012 All Rights Reserved | <a href="">Privacy Policy</a> | 
<a href="">Terms of Use</a></div>
</div>
</div>
<div class="item" id="item2">
<div class="content">
<div class="left_arrow"><a class="panel" href="#item1"><img alt="arrow" 
height="24"     
src="http://i49.tinypic.com/2i7obnq.png" width="24"></a></div>
<div class="right_arrow"><a class="panel" href="#item3"><img alt="arrow"    
height="24"     
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div>
</div>
</div>
<div class="item" id="item3">
<div class="content">
<div class="left_arrow"><a class="panel" href="#item2"><img alt="arrow" height="24"    
src="http://i49.tinypic.com/2i7obnq.png" width="24"></a></div>
<div class="right_arrow"><a class="panel" href="#item4"><img alt="arrow"   
height="24"     
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS

body {
height : 100%;
width : 100%;
margin : 0;
padding : 0;
overflow : hidden;
}
#wrapper {
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
background-color : #ffffff;
overflow : hidden;
}
#mask {
width : 500%;
height : 100%;
background-color : #ffffff;
}
.item {
width : 20%;
height : 100%;
float : left;
background-color : #b4d8e7;
}
.content {
width : 969px;
height : 590px;
margin : 0 auto;
background-color : #000000;
position : relative;
top : 125px;
}
.selected {
background : #fff;
font-weight : 700;
}
.clear {
clear : both;
}
a img {
border : none;
display : block;
}
a {
outline : 0;
}
html {
overflow : auto;
}

#navwrapper {
background-color:#000;
left:0;
top:80px;
width:100%;
position:fixed;
}

#nav {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:4px;
}

#nav,#nav ul {
list-style:none;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

#nav a {
display:block;
color:#ccc;
text-decoration:none;
padding:7px;
}

#nav a.dmenu:hover {
color:#36C !important;
background-color:#fff !important;
}

#nav li {
float:left;
position:static;
width:auto;
}

#nav li ul {
position:absolute;
display:none;
margin-left:-1px;
padding-bottom:10px;
background-color:#FFF;
border:1px solid #bbb;
border-top:none;
box-shadow:0 0 5px #ddd;
z-index:5000;
}

#nav li:hover a,#nav a:focus,#nav a:active {
color:#fff;
background:#444;
text-decoration:none;
padding:7px;
}

#nav li ul,#nav ul li {
width:10em;
}

#nav ul li a {
color:#36C !important;
border-right:0;
}

#nav ul li a:hover {
color:#36C !important;
background-color:#eef3fb !important;
border-right:0;
}

#nav li:hover ul {
display:block;
}

#nav li:hover ul a {
color:#000;
background-color:transparent;
}

#nav ul a:hover {
background-color:#606060 !important;
color:#FFF !important;
}

.menuseprator {
border-bottom:1px solid #ddd;
margin:10px 0;
}

.arrowdown {
font-size:0.5em;
}

.floatleft {
float:left;
}

.floatright {
float:right;
}

.clear {
clear:both;
}

#top_banner {
width : 468px;
height : 60px;
right : 1px;
position : fixed;
overflow : hidden;
padding : 10px;
}
#left_banner {
width : 120px;
height : 600px;
left : 1px;
top : 110px;
position : fixed;
overflow : hidden;
padding : 10px;
}
#right_banner {
width : 120px;
height : 600px;
right : 1px;
top : 110px;
position : fixed;
overflow : hidden;
padding : 10px;
}
#bottom_banner {
bottom : 50px;
right : 260px;
height : 90px;
width : 728px;
position : fixed;
z-index : 999;
margin : 0;
}
.right_arrow {
height : 24px;
width : 24px;
right : 0;
bottom : -30px;
border : none;
position : absolute;
padding : 0;
}
.left_arrow {
height : 24px;
width : 24px;
left : 0;
bottom : -30px;
border : none;
position : absolute;
padding : 0;
}
#logo {
left : 10px;
top : 8px;
border : 0;
height : 64px;
width : 64px;
position : fixed;
}
#footer {
bottom : 5px;
left : 476px;
font-family : Arial, Helvetica, sans-serif;
font-size : 11px;
text-align : center;
color : #6e6e6e;
position : fixed;
}

Answer 1

问题是您（过度）使用position: fixed。固定位置不应用于一般场地布局。它不适用于不同分辨率的浏览器，通常会导致问题。最多应该使用它来将一个条连接到屏幕的顶部或底部。

您的问题是潜在的问题，需要对CSS进行一些重新设计。

底部横幅转向内容区域

1 个答案: