css - 需要使基于 div 和 css 的页面在 IE 7 中工作

Question

我正在做一个元素，我需要使用 div 标签和 css 构建页面。这些页面在 Firefox、Opera、Safari 和 IE 8 中看起来不错，但是我使用 IE7 的客户提示 IE 7 中的布局问题。有人可以看看并告诉我如何修复代码，以便它在所有浏览器，尤其是 IE 7？链接和CSS代码如下。谢谢。

主页在这里:(代码在下面) http://www.danieldicenso.20m.com/citybeams/

/* HOME PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 300px;
}

#side-b {
    float: right;
    width: 300px;
}

#content { 
    float: left;
    width: 400px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px
} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
    }

body,td,th {
    color: #000000;
}
a:link {
    color: #003333;
}
a:visited {
    color: #000066;
}
a:active {
    color: #FF0000;
}

--------------------

Sign-up page is here:  (CSS Code below)
http://www.danieldicenso.20m.com/citybeams/signuppage.html

/* SIGNUP PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 100px;
}

#side-b {
    float: right;
    width:100px;
}

#content { 
    float: left;
    width: 800px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
}
.signupfield {
    float: none;
    width:480px;
    color:#000;
    margin-top: 1em;
    margin-right:1 em;
    margin-bottom: 1em;
    position: relative;
    left: 75px;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   
}
----------------------------------

Reviews page example is here: (CSS code below)
http://www.danieldicenso.20m.com/citybeams/reviewers.html

/* REVIEW PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 50px;
}

#side-b {
    float: right;
    width: 200px;
}

#content { 
    float: left;
    width: 750px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
    }
.signupfield {
    position:relative;
    width:480px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: -120px;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}


body,td,th {
    color: #000000;
}
a:link {
    color: #003333;
}
a:visited {
    color: #000066;
}
a:active {
    color: #FF0000;
}
#selectionbar {
    position: relative;
    left: 0px;
    top: 0px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}
#selectionbartwo {
    position: relative;
    left: 0px;
    top: -10px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

#selectionbarthree {
    position: relative;
    left: 0px;
    top: -10px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

#dividerline {
    position: relative;
    left: 0px;
    top: -4px;
    width: 750px;
    height: 1px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}
#results {
    position: relative;
    left: 55px;
    top: -14px;
    width: 600px;
    height: 1px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

Answer 1

如果默认边距和填充确实是您的问题，正如 Ryan 所建议的那样，您可以使用以下语句强制每个元素具有相同的基本边距和填充:

* {
   margin: 0px;
   padding: 0px;
}

请注意，这也可能会破坏您在其他浏览器中的布局，但至少它们都会以完全相同的方式被破坏。