0

私のウェブサイトに問題があります。ズームアウトすると、サイドバーがメイン コンテンツの下に移動します。ウェブサイトはこちらです。ここに私のコードがあります、

<div id="content_main" >
                    <div id="content_center">
                            <div id="news_spotlight_container">

                                    <div class="news">
                                    <h2 style=" border-bottom: 6px solid #000000; letter-spacing: 2px;color: #565347; ">WELCOME</h2>
                                            <div class="newsitem">
                                            <br class="clear">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Message From Chair Person</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou. </p> 
                                            </div>

                                            <br class="clear">
                                             <div class="newsitem">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Research</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
                                            </div>
                                            <br class="clear">
                                             <div class="newsitem">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Extra Curricular Activities</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
                                            </div>
                                            <br class="clear">
                                            </div> <!-- End news -->

                                            <div id="more-stories">
                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Quick Links</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">BE Time Table</a></li>
                                                            <li><a href="#">Lab Workbooks</a></li>
                                                            <li><a href="#">Final Year Projects</a></li>
                                                            <li><a href="#">Contact Us</a></li>
                                                    </ul>

                                            </div>
                                              <div id="more-stories">
                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Hall of Fame</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">Shams Uddin</a></li>
                                                            <li><a href="#">Fahad Qasim</a></li>
                                                            <li><a href="#">Zain Akhtar</a></li>
                                                    </ul>

                                            </div>
                                            <div id="more-stories">

                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Events</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">TechElete</a></li>
                                                            <li><a href="#">Vision</a></li>
                                                            <li><a href="#">Poster Competition</a></li>
                                                            <li><a href="#">Cache</a></li>
                                                    </ul>
                                            </div>  

                                            <p><!-- End more-stories -->
                                              <br class="clear">
                                            </p>
                                            <div style="width:100%; border-right:0px;"  class="news" >
                                                        <h2 style=" border-bottom: 6px solid  #000000 ;
                                                                        letter-spacing: 2px;
                                                                        ">
                                                                    <a href="#">About CISE</a>
                                                        </h2>
                                                      <br class="clear">
                                                      <img class="image_news" src="CIS_files/cis_view.png" alt="cis view" />
                                      <p>The department of Computer Information &amp; Systems Engineering (CISE) was established in July 1997. The department has been a pioneer at NED University in many respects. We have set trends that have been followed by many other departments. <br><br>Currently, the department offers a four year bachelors program in morning and masters program in morning as well in evening.</p>

                              </div>
                            </div> <!-- End news_spotlight_container -->
                            <br class="clear">
                    </div><!-- End content_center -->
            </div> <!-- End content_main -->
4

1 に答える 1

2

ズームに対応したい場合は、ブラウザーにピクセルの余裕を持たせる必要があります。たとえば、1 ピクセルの境界線があり、縮小すると、それらの境界線は画面上で 1 ピクセルになる必要がありますが、コンテナーは数ピクセル少なくなる可能性があります。正確なピクセル値に基づいて幅と配置を計算している場合、ブラウザはその狭さに対応するために配置を調整する必要があります。

あなたの状況でborder-right: 1px solid #EAE9E6;は、余分な幅を引き起こしているのは です。

于 2012-10-03T18:06:08.823 に答える