Question

我遇到一些客户网站在IE中无法正常显示的问题。我目前正在使用IE 9，但仍然会出现一些错误。链接是www.zenhomecleaning.com/ny/staff.html，我在Windows Vista上使用IE 9。

我遇到的第一个问题是div没有留在适当的位置。该页面在Google Chrome上看起来不错，但在IE 9上进行测试时，两个div显示不正确。

error 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并尝试不同的样式来正确对齐内容，但无济于事。非常感谢我对这两个问题的任何指导。非常感谢！

Answer 1

首先设置有效的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 Validator运行您的网页。当我通过验证器运行您的URL时，它会报告（除其他事项外）

Line 1, Column 85: Comments seen before doctype. Internet Explorer will go into the quirks mode.

Answer 2

它以怪癖模式渲染。我在源代码顶部看到<!doctype html>，但之前有一条评论，这似乎阻止了IE识别它。删除该评论，或将其移至DOCTYPE下方。

Answer 3

您必须使用标记中的所有属性，例如对齐...或在css中对其进行编码。

要测试与Internet Explorer的可比性，请尝试 IE Tester ：http://www.my-debugbar.com/wiki/IETester/HomePage :)

IE定位兼容性问题

3 个答案: