-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数量をパーセンテージで使用することをお勧めします。たとえば、テーブルの幅を指定する場合は、として指定するwidth: 10%;のではなく、として指定しwidth: 100px;ます。

しかし、私は推測します、それぞれの異なるブラウザには常に違いがあります...各ブラウザにはhtmlとcssのコンテンツを処理する独自の方法があるためです。

于 2012-06-23T10:08:29.683 に答える
0

例がなければ言うのは難しいです。まだこれを行っていない場合は、normalize.cssを試してください。

于 2012-06-23T10:00:52.127 に答える