1

如何让我的网站在所有网络浏览器中看起来都一样?我主要使用 Firefox,但我是一名新的网页设计师,我无法让我的网站在所有浏览器上看起来都一样。

我尝试使用谷歌搜索 webkits、jquery,但没有向我解释它是如何工作的。我还在学习jquery。我试图让我的标题导航栏和容器紧密结合在一起,就像我在 Firefox 中的代码一样。但在 Internet Explorer 9 中,它们之间的距离更远。我也试图让我的侧面容器更近,但在我正在查看的两个浏览器中它都不能正常工作。

              <!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" />
            <title>Untitled Document</title>
            <link href="template8.css" rel="stylesheet" type="text/css" />
            </head>

           <body style="background-attachment: fixed; background-repeat: no-repeat;"  background="Images/template8 bkg.jpg">
         <br />
         <br />

          <div id="header">
          <br />
          <br />
           <br />
           Floating Mountain Enterprise</div>
           </div>
           <div id="centeredmenu">
            <ul>
           <li><a href="portfolio.htm" class="active">Tab one</a></li>
         <li><a href="portfolio.htm">Tab two</a></li>
           <li><a href="portfolio.htm">Tab three</a></li>
         <li><a href="portfolio.htm">Tab four</a></li>
       </ul>
         <br />
          <br />
          <br />
         <br />
           <br />
          </div><!-- end header -->
          <div id="left"><center><br />
          <br />
          TEXT HERE<br />
           TEXT HERE<br />
           TEXT HERE<br />
            TEXT HERE<br />
           TEXT HERE<br />
            TEXT HERE<br />
            TEXT HERE</center></div>
            <div id="right"><center><br />
               <br />
            TEXT HERE<br />
            TEXT HERE<br />
           TEXT HERE<br />
           TEXT HERE<br />
           TEXT HERE<br />
           TEXT HERE<br />
           TEXT HERE</center></div>

         <div id="container">
          <div id="content">
              <h1>HEADER ONE</h1>  <!-- end h1 -->
          YOUR CONTENT HERE!

         <h2>Header Two</h2>
        <p>More content here. </p>
         <p>&nbsp;</p>
        <p>&nbsp;</p>
         <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
          <br />
          <br />

        </div>  <!-- end content -->
          </div>  <!-- end container -->


         </body>
          </html>

         CSS

         @charset "utf-8";
       /* CSS Document */

         html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr                {margin:0; padding:0;}
          h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-   size:1em; font-weight:normal; font-style:normal;}
         ul,ol {list-style:none;}
       fieldset,img,hr {border:none;}
       caption,th {text-align:left;}
         table {border-collapse:collapse; border-spacing:0;}
         td {vertical-align:top;}


       #header
        {     margin: 0px auto;
      text-align:center;
       font-size:x-large; font-weight:bold;
 width: 810px;
 height: 200px;
 background: url(Images/template8%20header.jpg);
 box-shadow: 15px 15px 5px #333;
 -moz-box-shadow: 10px 10px 5px #333;
 -webkit-box-shadow: 10px 10px 5px #333;
}

        #centeredmenu {
      float:left;
      width:100%;
        overflow:hidden;
       position:relative;
          }
    #centeredmenu ul {
      clear:left;
      float:left;
         list-style:none;
        margin:0;
        padding:0;
        position:relative;
       left:50%;
       text-align:center;
           }
     #centeredmenu ul li {
        display:block;
       float:left;
         list-style:none;
        margin:0;
        padding:0;
           position:relative;
         right:50%;
            }
       #centeredmenu ul li a {
        display:block;
        margin:0 0 0 5px;
        padding:3px 10px;
        background:#FFF;
        color:#000;
         text-decoration:none;
        line-height:1.3em;
       }
     #centeredmenu ul li a:hover {
       background: #999;
         color:#fff;
         }
       #centeredmenu ul li a.active,
       #centeredmenu ul li a.active:hover {
         color: #333;
         background:#000;
         font-weight:bold;
            }

       #container
        {     margin: 0px auto;
           padding-left:15px;
             margin-top:27px;
          width: 800px;
 height: auto;
 background: url(Images/container%20bkg.png);
 box-shadow: 15px 15px 5px #333;
 -moz-box-shadow: 10px 10px 5px #333;
 -webkit-box-shadow: 10px 10px 5px #333;}

        #content

     {     margin: 0px auto;
           padding-left:15px;
      width: 780px;
      padding-top:25px;
          height: auto;
font-family: "MS UI Gothic";
        font-style:oblique;
}

          #left * {
background-color: #999;
       -moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
      min-height: 400px;
      margin-left:35px;     
      float: left;     
      width: 150px;
        height: auto;
  box-shadow: 15px 15px 5px #666;
  -moz-box-shadow: 10px 10px 5px #666;
  -webkit-box-shadow: 10px 10px 5px #666; }

       #right *{
background-color:#999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
     margin-right:35px;    
          width: 150px;     
          min-height: 400px;     
           float: right;
     box-shadow: 15px 15px 5px #666;
     -moz-box-shadow: 10px 10px 5px #666;
     -webkit-box-shadow: 10px 10px 5px #666; } 
4

1 回答 1

0

在每个浏览器上看起来完全一样听起来有点极端......

在主流浏览器上类似(并且流畅)听起来更真实。

通常认为,如果您没有 CSS3 中的“border-radius”或其他很酷的东西可以在“旧浏览器”(例如 IE7 或 IE8)中工作,那是因为您的访问者必须更新他的浏览器......

所以,至少设法为他提供你网站/应用程序的可用体验,如果他没有酷炫的 CSS3 边框半径/不透明度/阴影……效果等等,那真的没什么大不了的……如果他不更新他的浏览器,也许是因为他不太关心那种东西。

Now, if you want every major browser to look similar, you could use a CSS reset first (this one is a common one, there are some others), then adapt it to your needs. It will reset the default settings the browsers use to display HTML elements, which differ on some points from one to another.

Then, if you still want to be able to use the CSS3 effects anyway, you can use something like PIE (or similar) for your effects to work on old IEs (6, 7 and 8). But, think that it will have some performance impacts because it's emulating CSS3 features with javascript.

于 2012-06-09T15:51:49.263 回答