Html CSS定位与IE的兼容性问题_Html_Css_Internet Explorer_Compatibility

Html CSS定位与IE的兼容性问题

html css internet-explorer

Html CSS定位与IE的兼容性问题,html,css,internet-explorer,compatibility,Html,Css,Internet Explorer,Compatibility,我有一些问题，客户的网站没有在IE中正确显示。我目前正在使用IE 9，但仍有一些bug出现。链接是www.zenhomecleaning.com/ny/staff.html，我在WindowsVista上使用IE9 我遇到的第一个问题是div没有呆在合适的地方。该页面在谷歌Chrome上看起来不错，但在IE9上测试时，两个div的显示不正确容器div是“rightpanel”，下面是HTML和CSS： <div id="rightPanel"> <

我有一些问题，客户的网站没有在IE中正确显示。我目前正在使用IE 9，但仍有一些bug出现。链接是www.zenhomecleaning.com/ny/staff.html，我在WindowsVista上使用IE9

我遇到的第一个问题是div没有呆在合适的地方。该页面在谷歌Chrome上看起来不错，但在IE9上测试时，两个div的显示不正确

容器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 -->

这个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 -->

我尝试过调整div，尝试不同的样式来正确对齐内容，但没有效果。如果您能就这两个问题提供指导，我将不胜感激。非常感谢

以设置有效的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">
 ...

它在“怪癖”模式下渲染。我在你的源代码顶部看到了

，但前面有一条评论，似乎阻止IE识别它。删除该注释，或将其移到DOCTYPE下面。

必须使用标签中的所有属性，如align。。。或者用css编码

要使用internet explorer测试可比性，请尝试使用IE测试仪：

：）

您需要使用

文本对齐：居中在内容css中，否则文本将不会显示在中心这就解决了问题…修复了div对齐的问题，并获得了以前无法正常工作的其他脚本之一。HTML 5 Doctype将在您的示例使用的每个浏览器中触发标准模式，但在Internet Explorer 6中也会触发。XML声明在text/html文档中是有害的（而XHTML作为text/html比它更麻烦）。除非有XML工具链，否则请使用HTML4.01或HTML5。
#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;
    }

<?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">
 ...

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