-3

我正在使用 html 和 css 技术开发应用程序。当我在不同的浏览器中查看应用程序时，我没有得到正确的输出。所以，请任何人都可以告诉我如何在不同的浏览器中以相同的分辨率调整应用程序......

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
 body{
     width:100%;
  margin:0;
padding:header-<length> 0 footer-<length> 0;
overflow:hidden;
 }
 div#header{
    background-image:url(abc.jpg);

  position:fixed;
  top:0;
  left:0;
  width:110%;
  height:20%;
 }
 div#footer{
     background-image:url(mnp.png);
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:5%;
 }
 @media screen{
  body>div#header{
   position:absolute;
  }
  body>div#footer{
     margin-left:16%;
     margin-right:17%;
     width:65%;
     color:#666;
     position:absolute;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
#menu{
    position:absolute;

    top:20%;
    width:100%;
    height:5.78%;
    }

#footermenu ul,li
{
    display:inline-block;


}
a#items:hover 
{
    background-image:url(hover.png);
    color:#FFFFFF;
}
ul,li
{
    display:inline;
    /*padding:0%;*/
    padding-left:.5%;
    }
    #list
    {
        position:absolute;
        top:25%;
        margin-left:13.7%;
        }
a:link
{
    text-decoration:none;
    color:black;
    }
a#footeritems:link
{
    text-decoration:none;
    color:#666;

    }


</style>
</head>



<body>
<div id="header"></div>
<div id="menu" style="background-image:url('menu.png');"><img src="logo.png" style="float:right;margin-right:14%;margin-top:-7.8%"  /><img src="search.png" style="float:right;margin-right:-28%;margin-top:.3%;" />
<div id="list">
<ul>
<a href="#" id="items"><li>HOME</li></a>
<a href="#" id="items"><li>FORUM</li></a>
<a href="#" id="items"><li>MARKETS</li></a>
<a href="#" id="items"><li>NEWS</li></a>
<a href="#" id="items"><li>SERVICES</li></a>
<a href="#" id="items"><li>ABOUT</li></a>
<a href="#" id="items"><li>LOGIN</li></a>
</ul>
</div>
</div>

<div id="content"> </div>
<div id="footer">
  <div id="footeConten" style="float:left; padding-bottom:10%; padding-left:45px; font-size:12px;"><p> "Powered by beginners" </p></div>
<div id="footerlist" style="float:right; padding-top:11px; font-size:12px;">
<ul>
<a href="#" id="footeritems"><li>Sitemap</li></a>|<a href="#" id="footeritems"><li>Help</li></a>|<a href="#" id="footeritems"><li>Disclaimer</li></a>|<a href="#" id="footeritems"><li>Privacy statements</li></a>|<a href="#" id="footeritems"><li>Terms fo use</li></a>|<a href="#" id="footeritems"><li>Contact</li></a>
</ul>

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

2 回答 2

0

最好以百分比使用所有 css 数量。例如，在为表格提供宽度时，提供 aswidth: 10%;而不是 as width: 100px;。

但我想，每个不同的浏览器总会有所不同......因为每个浏览器都有自己的处理 html 和 css 内容的方法。

于 2012-06-23T10:08:29.683 回答
0

没有任何例子很难说。如果您还没有这样做，请尝试normalize.css 。

于 2012-06-23T10:00:52.127 回答