网站在大多数浏览器上都没有正确缩放,大多数元素都被错放了

时间:2013-04-13 16:36:47

标签: html css web zoom

我正在使用HTML和CSS建立一个网站。

我有一个与缩放有关的小问题。当页面缩小时,大多数元素都会混乱并且不合适。

使用的浏览器:

  • Google Chrome
  • Safari浏览器

在27英寸屏幕上从Safari浏览时,情况变得更糟。

的index.html

<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>Arrow-TvSeries - Home</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        <meta property="fb:admins" content="{793705343}"/>
    </head>     
    <body>
    <center>
        <table>
            <tr>
                <td align="center">
                    <div id="fb-root"></div>
                    <script>(function(d, s, id) {
                      var js, fjs = d.getElementsByTagName(s)[0];
                      if (d.getElementById(id)) return;
                      js = d.createElement(s); js.id = id;
                      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=80504353315";
                      fjs.parentNode.insertBefore(js, fjs);
                    }(document, 'script', 'facebook-jssdk'));</script>
                    <div id="fb-root"></div>
                        <script>
                          window.fbAsyncInit = function() {
                            // init the FB JS SDK
                            FB.init({
                              appId      : '793705343',                                 // App ID from the app dashboard
                              channelUrl : '//www.arrow-tvseries.com/channel.html', // Channel file for x-domain comms
                              status     : true,                                    // Check Facebook Login status
                              xfbml      : true                                     // Look for social plugins on the page
                              cookie      : true,                                   // enable cookies to allow the server to access the session
                              oauth       : true                                    // enable OAuth 2.0
                            });

                            // Additional initialization code such as adding Event Listeners goes here
                          };
                          // Load the SDK asyncchronously
                          (function(d, s, id){
                             var js, fjs = d.getElementsByTagName(s)[0];
                             if (d.getElementById(id)) {return;}
                             js = d.createElement(s); js.id = id;
                             js.src = "//connect.facebook.net/en_US/all.js";
                             fjs.parentNode.insertBefore(js, fjs);
                           }(document, 'script', 'facebook-jssdk'));
                        </script>

                        <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                        xmlns:fb="http://www.facebook.com/2008/fbml"
                        xmlns:f="http://java.sun.com/jsf/core">
<!--website-->
                    <div id="hood_image">
                            <br/><br/><br/></br></br></br><img src="images/oli_arrow4.png" align="right"/>
                    </div>
                    <div id="sitewrapper">
                        <div id="header"></div>
                        <div id="line"></div>
                        <div id="menu">
                            <br><a href="index.html">Home</a> | <a href="cast.html">Cast</a> | <a href="episodes.html">Episodes</a>
                        </div>
                <!--content-->
                        <div id="content">
                            <div id="episodecontent">
                                <table border="0">
                                    <tr>
                                        <td>
                                            <img id="episodeimg" src="images/Next-Episode.png"/>
                                        </td>
                                        <td>
                                            <p style="color: white"><b>Title:</b> Home Invasion<br/><b>Date:</b> 24th April 2013</p>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="division1">
                                <p>After a violent shipwreck, billionaire playboy Oliver Queen was 
                                missing and presumed dead for five years before being discovered 
                                alive on a remote island in the Pacific. When he returns home to 
                                Starling City, his devoted mother Moira, much-beloved sister Thea, 
                                and best friend Tommy welcome him home, but they sense Oliver has 
                                been changed by his ordeal on the island. While Oliver hides the 
                                truth about the man he's become, he desperately wants to make amends 
                                for the actions he took as the boy he was. Most particularly, he 
                                seeks reconciliation with his former girlfriend, Laurel Lance.</p><br/>

                                <p>As Oliver reconnects with those closest to him, he secretly creates 
                                the persona of Arrow a vigilante to right the wrongs of his family, 
                                fight the ills of society and restore Starling City to its former glory. 
                                By day, Oliver plays the role of a wealthy, carefree and careless 
                                philanderer he used to be - flanked by his devoted chauffeur/bodyguard, 
                                John Diggle - while carefully concealing the secret identity he turns 
                                to under the cover of darkness. However, Laurel's father, Detective 
                                Quentin Lance, is determined to arrest the vigilante operating in his 
                                city. Meanwhile, Oliver's own mother, Moira, knows much more about the 
                                deadly shipwreck than she has let on and is more ruthless than he 
                                could ever imagine.</p><br/>

                                <p style="font-size: 20px"><b>I n t r o d u c t i o n</b></p><br/>

                                <p>At the beginning of each episode, with the exception of "Pilot", the 
                                first episode of the series, a voiceover of Oliver Queen describes 
                                briefly the hardships that Oliver faced on Lian Yu. He states that 
                                as he returned, he set out to fulfill his father's dying wish.</p><br/>

                                <p>"My name is Oliver Queen. For five years I was stranded on an 
                                island with only one goal: survive. Now I will fulfill my father's 
                                dying wish. To use the list of names he left me and bring down those 
                                who are poisoning my city. To do this, I must become someone else. 
                                I must become... something else."</p>

                                <div id="video" align="middle">
                                    <iframe width="640" height="360" 
                                        src="http://www.youtube.com/embed/xZrFSsc6CpI?autoplay=1" 
                                        frameborder="1" allowfullscreen>
                                    </iframe>
                                    <!--?autoplay=1-->
                                </div>
                                <div>
                                    <script type="text/javascript"><!--
                                        google_ad_client = "ca-pub-8938167182852335";
                                        /* Home paga bottom */
                                        google_ad_slot = "9919170802";
                                        google_ad_width = 468;
                                        google_ad_height = 60;
                                        //-->
                                    </script>
                                    <script type="text/javascript"
                                        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                                    </script>
                                </div>
                                <div style="float: right; font-size: 9px;">
                                    <p><br/><br/>Most of the information about this Tv-Show is taken from <a href="http://http://www.imdb.com/title/tt2193021/?ref_=sr_1" target="new">IMDB.COM</a></p>
                                </div>
                            </div>
                            <div id="division2">
                                <div class="fb-comments" data-href="http://www.arrow-tvseries.com" data-width="200" 
                                    data-num-posts="10" data-colorscheme="dark">
                                </div>
                                <div class="fb-like" data-href="http://www.arrow-tvseries.com" data-send="false" 
                                    data-width="220" data-show-faces="true" data-font="arial">
                                </div><br/>
                                <div><br/>
                                    <p><b>You may also like:</b></p>
                                </div>
                                <div>
                                    <script type="text/javascript"><!--
                                        google_ad_client = "ca-pub-8938167182852335";
                                        /* First Ad */
                                        google_ad_slot = "7105305203";
                                        google_ad_width = 120;
                                        google_ad_height = 600;
                                        //-->
                                    </script>
                                    <script type="text/javascript"
                                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                                    </script>
                                </div>
                                <div>
                                    <br/><br/><a href="http://www.imdb.com"><img src="images/imdb.png" alt="IMDB" width="100" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </center>
</body>

的style.css

a:link    {color:#fff;} /* unvisited link */
a:visited {color:#fff;} /* visited link */
a:hover   {color:#2e6402;} /* mouse over link */
a:active  {color:#fff;} /* selected link */

#table{
padding-top: 30px;
padding-bottom: 30px;
z-index: 100;
}

#header{
background-position: center;
position: relative;
background-image:url('images/logo_bg.png');
background-repeat:no-repeat;
border-radius: 25px;
height: 331px;
width: 1300px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: -3;
/*border:2px solid;*/
display:block;
margin: 0 auto 0 auto;
}

#line{
width: 1290px;
height: auto;
background-color: white;
padding-top: 1px;
margin: 0 auto 0 auto;
}

body{
background-color: black;
}

#sitewrapper{
width: 1300px;
height: 100%;
padding-left: 0px;
padding-top: 3px;
padding-right: auto;
margin: 0 auto 0 auto;
}

p{
text-align: justify;
font-family: arial;
padding-left: 0px;
margin: 0 auto 0 auto;
color: white;
}

p2{
text-align: justify;
font-family: arial;
padding-left: 0px;
color: green;
margin: 0 auto 0 auto;
}

#menu{
width: 1250px;
height: auto;
color: white;
padding-top: 0px;
padding-right: 100px;
padding-bottom: 0px;
font-size: 120%;
/*border:2px solid;*/
text-align: right;
font-family: arial;
z-index: 31;
position: relative;
margin: 0 auto 0 auto;
}

#episodeimg{
width: 250px;
float: left;
padding-top:0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
margin: 0 auto 0 auto;
}

#episodecontent{
width: 55%;
float: auto;
margin: 0 auto 0 auto;
}

#hood_image{
float: left;
width: 30%;
height: auto;
position: fixed;
z-index: 1;
padding-left: 0px;
}

#content{
float: right;
width: 85%;
position: absolute;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: 5;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}

#division1{
position: relative;
float: left;
height: 100%;
width: 700px;
color: white;
padding-top: 30px;
padding-left: 20%;
padding-right: 0px;
padding-bottom: 10px;
z-index: 30;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}

#division2{
float: right;
height: 100%;
width: 20%;
/*padding-top: 0px;
padding-left: 0px;
padding-right: 0px;*/
color: white;
border:2px solid;
margin: 0 auto 0 auto;
z-index: 1000;
overflow: hidden;
position: relative;
}

#video{
padding-top: 50px;
padding-left: 0%;
padding-right: 0%;
padding-bottom: 100px;
/*border:2px solid;*/
}

#footer{
/*background-color: red;*/
height: 10px;
width: 100%;
color: black;
background-color: white;
display:block;
}

指向此网站的链接:

www.arrow-tvseries.com

1 个答案:

答案 0 :(得分:1)

这里有一些事情要考虑。 #sitewrapper需要position:relative,因为您希望将#content定位为绝对位置,以使其相对于其父元素而非文档。这会稍微改变您的布局。

下一部分就是在width: 85%上使用#content。这限制并推动了Facebook整合。考虑将其设置为100%。这将使facebook框浮动到文本的右侧。

布局和定位元素有许多不同的方法,这可能不是最佳解决方案,这些更改应该使它在缩放时不会移动(在chrome中测试)。

您可能还需要考虑其他一些事项。尝试在http://jigsaw.w3.org/css-validator/验证css,它会指出一些错误。