缩放时内容移到标题上方 [英] Content moves over header when zooming
问题描述
美好的一天
我已经使用CSS3和HTML5为IE9创建了ASP.net网站.它适用于IE9，Firefox，Google Chrome和Safari.
我在样式表中做了一些修改，使其可以用于IE8.当我在IE8中测试网站时(更改屏幕分辨率，放大和缩小等)，主要内容移到标题上方.放大和缩小时，菜单，主要内容和页脚保持在一起.
当我缩小时，菜单+主要内容移到标题上方.当我放大时，菜单+主要内容从标题移开，并在标题和菜单之间留出空白.
我在样式表中使用了一些与IE8不兼容的css3编码.
这是我的CSS代码
//stylesheet
Good day
I have created a ASP.net website for IE9 using CSS3 and HTML5. It works for IE9, Firefox, Google Chrome and Safari.
I made some modifications in my stylesheet that it can work for IE8. When I tested the website in IE8 (changing screen resolution, zooming in and out etc) the main content moves over the header. The menu, main content and footer stays together when zooming in and out.
When I zoom out, the menu + main content moves over the header. When I zoom in, the menu + main content moves away from the header and leaves a white space between the header and menu.
I used some css3 coding in the stylesheet that is not ompatible with IE8.
Here is my css code
//stylesheet
html, body, #main{ height: 100%; margin: 0; padding: 0;}
#form1
{
height:100%;
margin:0;
}
#UpdatePanel1
{
height:100%;
margin:0;
}
#header
{
-moz-background-size: cover; //css3
background-size: cover; //css3
background-image:url(/Images/header.gif);
background-size:100% 100%; //css3
background-repeat:no-repeat;
clear:both;
background-color:#585858;
position:absolute;
top:0;
left:0;
width:100%;
height:25%;
z-index:-1;
background-position:center;
}
#menu
{
background-color :#7C7C7C;
height:auto;
text-decoration : none;
margin:150px 0px 0px 0px;
padding:0px 40px 0px 40px;
width:100% auto;
border-bottom:3px solid #B1ABAB;
min-height: 2%;
bottom:-200px;
position:relative;
}
#main
{
margin-right:60px;
margin-left:60px;
margin-top:200px;
height:auto;
background-color: #ECECEC;
width :100% auto;
padding:40px 40px 0px 40px;
overflow:auto;
min-height:100%;
}
#footerbottom {
clear: both;
position: relative;
z-index: 0;
height: 3em;
margin-top: -3em;
background-color: #585858;
border-top:3px solid #B1ABAB;
overflow:hidden;
}
#main { padding-bottom: 4em; }
#contactus { padding-bottom: 20em; }
#applications { padding-bottom: 20em; }
//母版页
//master page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>TsogoSafe</title>
<link href="Styles/main.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</head>
<body>
<form id = "form1" runat="server" autocomplete="off">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id = "header">
<h1><br /><br /><br /></h1>
</div>
<div id = "menu">
<a href = "Default.aspx"> Home</a><span class="style1"></span> |
<a href ="Applications.aspx">Applications</a><span class="style1"></span>
| <a href ="Contact.aspx">Contact Us</a></div>
<div id = "main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id = "footerbottom"></div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
我的问题是，带有主要内容和页脚的菜单没有粘贴"到页眉.
我在样式表中做错了什么?
My problem is, that my menu with the main content and footer is not "sticking" to my header.
What am I doing wrong in my stylesheet?
推荐答案
这是我在样式表中为与IE8一起使用所做的更改.
This is what I have changed in my stylesheet to work with IE8.
html, body, #main { height: 100%; margin: 0; padding: 0;}
#form1
{
height:100%;
margin:0;
}
#UpdatePanel1
{
height:100%;
margin:0;
}
#header
{
-moz-background-size: cover;
background-size: cover;
background-image:url(/Images/header.gif);
background-size:100% 100%;
background-repeat:no-repeat;
clear:both;
background-color:#585858;
position:absolute;
top:0;
left:0;
width:100%;
height:25% auto;
z-index:-1;
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader (src='Images/header.gif', sizingMethod='scale') ";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/header.gif', sizingMethod='scale');
background-position:center;
margin:0 auto 0 auto;
overflow:none;
}
#menu
{
background-color :#7C7C7C;
height:auto;
text-decoration : none;
margin:150px 0px 0px 0px;
padding:0px 40px 0px 40px;
width:100% auto;
border-bottom:3px solid #B1ABAB;
min-height: 2%;
bottom:-128px;
position:relative;
}
#main
{
margin-right:60px;
margin-left:60px;
margin-top:120px;
height:auto;
background-color: #ECECEC;
width :100% auto;
padding:40px 40px 0px 40px;
overflow:hidden;
min-height:100%;
}
#footerbottom {
clear: both;
position: relative;
z-index: 0;
height: 3em;
margin-top: -3em;
background-color: #585858;
border-top:3px solid #B1ABAB;
overflow:hidden;
}
#main { padding-bottom: 4em; }
这篇关于缩放时内容移到标题上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
