0

クライアントのWebサイトがIEで正しく表示されないという問題がいくつかあります。私は現在IE9を使用していますが、まだいくつかのバグがあります。リンクはwww.zenhomecleaning.com/ny/staff.htmlで、WindowsVistaでIE9を使用しています。

私が抱えている最初の問題は、divが適切な場所に留まらないことです。このページはGoogleChromeで問題ないように見えますが、IE 9でテストすると、2つのdivが正しく表示されません。

エラー1

コンテナdivは「rightpanel」であり、HTMLとCSSは次のとおりです。

<div id="rightPanel">

            <div id="socialmedia">
                    <div><a href="http://facebook.com/zenhomeinc" target="_blank"><span id="facebook"></span></a></div>
                    <div><a href="http://twitter.com/zenhomeinc" target="_blank"><span id="twitter"></span></a></div>
                    <div><a href="http://www.youtube.com/user/zenhometherapy/videos" target="_blank"><span id="youtube"></span></a></div>
                    <div><a href="http://www.linkedin.com/company/1593810" target="_blank"><span id="linkedin"></span></a></div>

            </div><!-- end of #socialmedia -->

                <br />
                <div id="customerlobby"><a href="http://www.customerlobby.com/reviews/5095/zen-home-cleaning/" onclick=
                "window.open('http://www.customerlobby.com/reviews/5095/zen-home-cleaning/', 'ReviewPage', 
                'statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=540, height=575,left=570,top=200,screenX=570,screenY=200'); 
                return false;" target="_blank"><img src="https://www.customerlobby.com/ctrack-5095" border="0" style="display: none;" alt=
                "Statistics" /><img alt="Zen Home Cleaning Customer Reviews" src="https://www.customerlobby.com/logo-serve?id=791" border="0" /></a
                ><!--End Customer Lobby--></div>

                <div id="phone">
                  <h3>Contact Us Today</h3><h1>212.462.2566</h1></div>           

        </div><!-- end of #rightPanel -->

およびCSS：

#header #rightPanel {
    width: 500px;
    height: 185px;
    margin: 5px 7px 0 0;
    float: right;
}
    #socialmedia {
        width: 153px;
        height: 26px;
        float: right;
        margin: 10px -28px 0 0;
        padding-right: 0;
    }
        #socialmedia #facebook {
            background: url(../img/icon_facebook.jpg);
            width: 26px;
            height: 26px;
            margin: 0 3px 0;
            float: left;
        }
        #socialmedia #twitter {
            background: url(../img/icon_twitter.jpg);
            width: 26px;
            height: 26px;
            margin: 0 3px 0;
            float: left;
        }
        #socialmedia #youtube {
            background: url(../img/icon_youtube.jpg);
            width: 26px;
            height: 26px;
            margin: 0 3px 0 3px;
            float: left;
        }
        #socialmedia #linkedin {
            background: url(../img/icon_linkedin.jpg);
            width: 26px;
            height: 26px;
            float: left;
            margin: 0 0 0 3px;
        }
        #rightPanel #customerlobby {
            width: 100%;
            height: 70px;
            margin: 12px 0 0 0;
            float: right;
            text-align: right;
        }

    #header #phone {
        width: 220px;
        float: right;
        text-align: right;
    }
        #header #phone h1 {
            font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: .1em;
        }
        #header #phone h3 {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: .1em;
            margin-bottom: -15px;
        }

このdivは、メニューの右側に並べる必要があります。

そして、コンテンツdivについては、ここにHTMLとCSSがあります。

    <div id="main">
            <div id="content"><!-- InstanceBeginEditable name="content" -->
            <h1>Meet the Staff</h1>

                <div id="staff">



                    <div class="title">Management</div>

                    <div class="row-2">
                        <div class="staffPhoto"><h4>Operations Manager</h4><a     class="various fancybox.iframe" rel="staff" href=
                        "staff/marina.html" ><img src="staff/img/marina-thumb.jpg" alt="Green Cleaning Services, Marina Gospodinova" /><p>Marina Gospodinova</p></a></div>
                        <div class="staffPhoto"><h4>Field Manager</h4><a class="various fancybox.iframe" rel="staff" href=
                        "staff/mariyana.html" ><img src="staff/img/mariyana-thumb.jpg" alt="Green Cleaning Services, Mariyana Nedelcheva" /><p>Mariyana Nedelcheva</p></a></div>

                    </div>





                    <div class="title">Client Services</div>

                    <div class="row-2">
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lucille.html" ><img src=
                    "staff/img/lucille-thumb.jpg" alt="Green Cleaning Services, Lucille Manariotis" /><p>Lucille Manariotis</p></a></div>

                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href=
                        "staff/akia.html" ><img src="staff/img/akia-thumb.jpg" alt="Green Cleaning Services, Akia Ridley" /><p>Akia Ridley</p></a></div>

                    </div>

                    <div style="margin-bottom: -50px; "></div>





                    <div class="title">Quality Control Services</div>
                    <div class="row-4">

                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div>

                    <div style="margin-bottom: -50px; "></div>

                    <div class="title">Cleaning Consultants</div>
                    <div class="row-6">
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/alesha.html" ><img src="staff/img/alesha-thumb.jpg" alt="Green Cleaning Services, " /><p>Alesha</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/awilda.html" ><img src="staff/img/awilda-thumb.jpg" alt="Green Cleaning Services, " /><p>Awilda</p></a></div>                    
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/beverly.html" ><img src="staff/img/beverly-thumb.jpg" alt="Green Cleaning Services, " /><p>Beverly</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/christin.html" ><img src="staff/img/christin-thumb.jpg" alt="Green Cleaning Services, " /><p>Christin</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/crystal.html" ><img src="staff/img/crystal-thumb.jpg" alt="Green Cleaning Services, " /><p>Crystal</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/daphne.html" ><img src="staff/img/daphne-thumb.jpg" alt="Green Cleaning Services, " /><p>Daphne</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/denise.html" ><img src="staff/img/denise-thumb.jpg" alt="Green Cleaning Services, " /><p>Denise</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/francis.html" ><img src="staff/img/francis-thumb.jpg" alt="Green Cleaning Services, " /><p>Francis</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/glenda.html" ><img src="staff/img/glenda-thumb.jpg" alt="Green Cleaning Services, " /><p>Glenda</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/iris.html" ><img src="staff/img/iris-thumb.jpg" alt="Green Cleaning Services, " /><p>Iris</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ivelisse.html" ><img src="staff/img/ivelisse-thumb.jpg" alt="Green Cleaning Services, " /><p>Ivelisse</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/jovana.html" ><img src="staff/img/jovana-thumb.jpg" alt="Green Cleaning Services, " /><p>Jovana</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/kashmire.html" ><img src="staff/img/kashmire-thumb.jpg" alt="Green Cleaning Services, " /><p>Kashmire</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/leyda.html" ><img src="staff/img/leyda-thumb.jpg" alt="Green Cleaning Services, " /><p>Leyda</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lissy.html" ><img src="staff/img/lissy-thumb.jpg" alt="Green Cleaning Services, " /><p>Lissy</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ljumnije.html" ><img src="staff/img/ljumnije-thumb.jpg" alt="Green Cleaning Services, " /><p>Ljumnije</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/marina2.html" ><img src="staff/img/marina2-thumb.jpg" alt="Green Cleaning Services, " /><p>Marina</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mary.html" ><img src="staff/img/mary-thumb.jpg" alt="Green Cleaning Services, " /><p>Mary</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mildred.html" ><img src="staff/img/mildred-thumb.jpg" alt="Green Cleaning Services, " /><p>Mildred</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/miquel.html" ><img src="staff/img/miquel-thumb.jpg" alt="Green Cleaning Services, " /><p>Miquel</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mirjeta.html" ><img src="staff/img/mirjeta-thumb.jpg" alt="Green Cleaning Services, " /><p>Mirjeta</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/nefertiti.html" ><img src="staff/img/nefertiti-thumb.jpg" alt="Green Cleaning Services, " /><p>Nefertiti</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/raina.html" ><img src="staff/img/raina-thumb.jpg" alt="Green Cleaning Services, " /><p>Raina</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/reina.html" ><img src="staff/img/reina-thumb.jpg" alt="Green Cleaning Services, " /><p>Reina</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/teresa.html" ><img src="staff/img/teresa-thumb.jpg" alt="Green Cleaning Services, " /><p>Teresa</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/torra.html" ><img src="staff/img/torra-thumb.jpg" alt="Green Cleaning Services, " /><p>Torra</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/vanessa.html" ><img src="staff/img/vanessa-thumb.jpg" alt="Green Cleaning Services, " /><p>Vanessa</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/victor.html" ><img src="staff/img/victor-thumb.jpg" alt="Green Cleaning Services, " /><p>Victor</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira.html" ><img src="staff/img/yahaira-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div>
                    <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira2.html" ><img src="staff/img/yahaira2-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div>

                     </div>

                     <div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div>

                </div><!-- end of #staff"-->
  </script><!-- InstanceEndEditable --></div>
            <!-- end of #content -->
        </div><!-- end of #main -->

およびCSS：

#main {
display: block;
width: 100%;
max-width: 990px;
margin: 0 auto;
padding-top: 50px;
}

#main #content {
    width: 95%;
    max-width: 990px;
    margin: 0 auto;
}

#main #content .small {
    font-size: 11px;
}

    #main #content p {
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 14px;
        letter-spacing: .1em;
    }

divを調整し、さまざまなスタイルを試してコンテンツを適切に配置しようとしましたが、役に立ちませんでした。私が抱えているこれらの2つの問題についてのガイダンスを本当にいただければ幸いです。どうもありがとう！

4

3 に答える 3

0

まず、有効なDOCTYPEヘッダーを設定して、ブラウザーが予期するHTMLまたはXHTMLを認識できるようにします。

HTML5が嫌いなブラウザをサポートしたい場合は、これをお勧めします

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 ...

コードを厳密にしようとしないと、この問題の後にさらに多くの問題が発生する可能性があります。

次に、特定の問題を修正する前に、 HTMLバリデーターを介してページを実行します。私があなたのURLをバリデーターに通すと、それは（とりわけ）報告します

Line 1, Column 85: Comments seen before doctype. Internet Explorer will go into the quirks mode.
于 2012-06-18T21:18:47.233 に答える
0

クァークズモードでレンダリングしています。ソースの上部に表示<!doctype html>されていますが、その前にコメントがあり、IEがそれを認識できないようです。そのコメントを削除するか、DOCTYPEの下に移動します。

于 2012-06-18T21:24:35.737 に答える
0

align ...などのタグですべての属性を使用するか、cssでコーディングする必要があります。

Internet Explorerとの比較可能性をテストするには、IE Testerを試してください：http ：//www.my-debugbar.com/wiki/IETester/HomePage :)

于 2012-06-18T21:42:53.440 に答える