Question

我正在使用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>

Answer 1

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

Answer 2

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

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

如何在不同的浏览器中以相同的分辨率调整应用程序？

2 个答案: