css - Internet Explorer margin css hack

Question

我正在尝试将两个 div 并排排列。我设法破解了 Firefox 和 Chrome 的 CSS，但在使用 Internet Explorer 时遇到了问题。我在这里看过，谷歌发现了一些但仍然有问题。

这是网站

http://colmandesigns.123abc.co.nz/dev/brittens/index.html

这是我的CSS

http://codepad.org/Wohvhj3h

任何帮助都会很棒

谢谢

Answer 1

您的问题与您放置元素的方式有关。要使用此结构对齐元素，您必须删除所有将 anchor 与图像(在“staffimages”内)分隔开的
标签，并使用 CSS 边距。

    <div class="staffimages">
    <a href="#">
    <img src="images/staff.jpg" width="50" height="50" alt="Johnny" border="0">
    </a>
    <br> -- delete this
    <br> -- also delete this (and so on)

此外，我建议您不要使用特定于浏览器的 CSS hack，除非没有其他方法可以解决问题。

您可以在下方看到用于 HTML 文件的 CSS 片段。

    @charset "utf-8";
    /* CSS Document */
    
    body                            {margin: 0 auto;}
    
    .container                        {margin:0 auto; width:1000px; height:950px; background-image:url(images/container.png);}
    
    #head_back {
    position: absolute;
    left: 0px;
    top: 16px;
    width:700px;
    right:700px;
    height: 126px;
    z-index: -1;
    background-image:url(images/bgbg.png);
    }
    
    /* HEADER */
    
    .header                            {width:982px; height:370px; margin-left:9px; background-image:url(images/header.jpg);}
    .navibg                            {background-image:url(images/navibg.png); width: 983px; height:56px;}
    .logo                            {margin-top:-40px;}
    
    /* CONTENT TITLES */
    
    #welcome                        {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;}
    #services                        {width:89px; height:22px; margin-left:-90px; padding-top:250px; float:left;}
    #contactus                        {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;}
    #makinglifeeasy                    {width:89px; height:22px; padding-left:30px; padding-top:30px; float:left;}
    .seperator                        {width:300px; float:right; padding-top:30px; padding-right:90px;}
    #team { position: relative; margin-top: 30px; height: 19px; width: 78px; float: right; margin-right: -105px; }
    
    /* NAVIGATION */
    
    .navi                            {float:right; padding-right:50px; padding-top:3px;}
    
    /* CONTENT */
    
    .welcomecolumn                    {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;}
    .servicescolumn                    {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;}
    
    .list1                            {float:left; margin-left:-20px;}
    .list2                            {float:right; padding-right:200px;}
    
    /* FOOTER */
    
    .footer                            {background-image:url(images/footer.png); width:982px; height:65px; margin-left:9px; margin-top:460px;  color:#505050}
    .footernavi                        {font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; float:right; padding-right:60px; padding-top:27px;}
    .footernavidetails                {font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; float:left; padding-left:308px; padding-top:27px; color:#FFFFFF; }
    .footertext                        {padding-left:40px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-top:110px; padding-bottom:5px; color:#aeaeae; text-align:center}
    
    /* TEAM */
    
    .staffimages {
        height:auto;
        float:left;
        margin-left:12px;
        margin-top:15px;
    }
    
    .staffimages a {
        display: inline-block;
        margin-bottom: 20px;
    }
    
    .stafftext1, .stafftext2, .stafftext3, .stafftext4, .stafftext5 {
        width:150px;
        float:left;
        margin-left:80px;
        color:#505050;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        text-align:justify;
        position:absolute;
    }
    
    .stafftext1    {
        top:30px;
    }
    
    .stafftext2    {
        top:100px;
    }
    
    .stafftext3    {
        top:170px;
    }
    
    .stafftext4    {
        top:242px;
    }
    
    .stafftext5 {
        top:311px;
    }
    
    /* READ MORE */
    
    #readmore, #readmore2, #readmore3, #readmore4, #readmore5 {
        width: 100px;
        height: auto;
        float: right;
        position: absolute;
        margin-left: 80px;
    }
    
    #readmore {
        top: 66px;
    }
    
    #readmore2 {
        top: 135px;
    }
    
    #readmore3 {
        top: 204px;
    }
    
    #readmore4 {
        top: 275px;
    }
    
    #readmore5 {
        top: 345px;
    }
        
        .contactdetails
            {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:400px; padding-left:8px; line-height:40%; color:#626262}
            
        .main    {color:#626262}
        
        /* GOOGLE */
    
    .google                    {
        width:300px;
        height:305px;
        float:left;
        margin-left:8px;
        margin-top:12px;
        margin-bottom:20px;}    
    /* LINKS */
    
    a.colman:link { color:#aeaeae; text-decoration:none}      /* unvisited link */
    a.colman:visited { color:#aeaeae; text-decoration:none}  /* visited link */
    a.colman:hover {color:#0c3976; text-decoration:none}  /* mouse over link */
    a.colman:active { color:#aeaeae; text-decoration:none}  /* selected link */
    
    a.footerlinks:link { color:#FFFFFF;}      /* unvisited link */
    a.footerlinks:visited { color:#FFFFFF;}  /* visited link */
    a.footerlinks:hover {color:#FFFFFF;}  /* mouse over link */
    a.footerlines:active { color:#FFFFFF;}  /* selected link */