互联网资源管理器边际css破解

Question

即时尝试排队两个div彼此相邻。我设法破解了Firefox和Chrome浏览器的CSS，但遇到了Internet Explorer问题。我在这里看过，谷歌发现了一些，但仍然有问题。

继承人的网站

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

继承人我CSS

http://codepad.org/Wohvhj3h

任何帮助将是巨大的

感谢

Answer 1

您的问题与您放置元素的方式相关联。要采用这种结构排列的元素，你就必须删除所有<BR>标签分开与图像的锚（内部“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黑客除非有解决问题没有别的办法。

下面你可以看到一个CSS代码片段用于HTML文件。

 

    @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 */