Question

我和这个人一直在一起玩，几乎完成了我的网页，除了不可避免的IE6之外，大多数浏览器都很好！我一直在做一些研究，发现CSS中的填充和边距有问题，并试图无济于事。是否有人可以提供帮助？

www.theclubnetwork.co.uk

body {
    background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
    margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: blue;
        margin:0;
        padding:0;    
}
#env {
    position: relative;
    margin: 0 auto;
    width: 934px;
    background: url('../Images/env_bg.jpg') repeat-y 0 0;
    margin-top: 10px;
    padding: 125px 0 0 0;
}
#main {
    width: 934px;
    background:  transparent url('../Images/main_bg.jpg') no-repeat 0 0;
    z-index: 10;
}
#promo {
    position: absolute;
    top: 0;
    left: 0;
    width: 934px;
    background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
    position: relative;
    margin: 0 auto;
    top: 5px;
    width: 633px;
    background: url('../Images/bor_bg.gif') repeat-y 0 0;
    padding: 0 0 0 0;
}
#foot {

    height: 49px;
    width: 912px;
    background: url('../Images/foot_bg.png') no-repeat 0 100%;
    padding: 0 11px 8px 11px;
    color: #506273;
    font-size: 11px;
    clear: both;
    text-align: center;
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
}
#foot a {
    font-weight: normal;
    color: #506273;
    padding-left: 0;
    background-image: none;
}
#foot div {
    padding: 8px 0 0 10px; /*top right bottom left*/
    line-height: 16px;
}
#logo {
    position: relative; 
    float: left; 
    width: 279px;
    padding-right:20px;
    top:20px;
    left: 10px; 
    text-align: center;
    z-index: 6;
    background-color: #ffa500;
}
#slow {
    position: relative; 
    text-align: center;
    z-index: 6;
}
.nav {
    position: relative; 
    float: left;
    width: 125px;
    height: 125px;
    background-color: #fff;
    text-align: center;
    z-index: 25;
}
* html #welcome {
    margin-left: 0px;
}
#welcome {
    position: relative;
    margin-left: 2px;
    float: left;
    width: 297px; 
    height: 150px; 
    background-color: #fff;
    z-index: 6;
    text-align: center;
    vertical-align: middle;
}
a.slogan {
    width: 150px;
    color: blue;
    font-size: 17px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.mainslogan {
    width: 150px;
    color: #ffa500;
    font-size: 48px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.sloganmiddle {
    width: 150px;
    color: #ffa500;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.bottomslogan {
    width: 150px;
    color: #fff;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.welcome_text {
    position : relative;
    top: 10px;
    color: blue;
    font-size: 30px;
    vertical-align: top;
    z-index: 6;
    display: block;
}
.our_web {
    position : relative;
    color: #ffa500;
    top: 10px;
    font-size: 20px;
    padding-bottom:7px;
    display:block;
}
a.form {
    font-size: 13px;
    padding-top:10px;
    padding-bottom: 10px;
    color: blue;
}
a.first_web {
    position : relative;
    color: #0d7acf;
    top: 0px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0px;
    text-align: middle;
    display: inline;
}
p.statement {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 0px;
    text-align: justify;
}
p.allocated {
    text-align: right;
}
* html .clubreg {
    padding-right: 0px;
    padding-left: 0px;
}    
.clubreg {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    z-index: 10;
    padding-top: 12px;
    padding-right: 13px;
    padding-left: 12px;
    text-align: left;
}
.memreg {
    position: relative; 
    float: left; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    text-align: left;
}
.clubform {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: left;
}
div.box335 { 
    width: 220px; 
    float: left;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box335in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
    padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 { 
    width: 220px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box220in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 { 
    width: 267px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0; 
}
div.box267in { 
    background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 287px; 
    height: 165px; 
    background-color: #fff;
    z-index: 6;
    text-align: left;
    color: #0d7acf;
    padding-left: 12px;
    padding-right: 0px;
    padding-top: 13px;
}
div.box454 { 
    width: 454px;
    height: auto;
    float: left;
    background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0; 
}
div.box454in { 
    background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
    padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 { 
    width: 609px;
    min-height: 340px;
    height: auto;
    float: left;
    background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
    padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in { 
    background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left; 
    min-height: 478px;
    padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
    color: blue;
    width: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    font-weight: bold;
    text-align: center;
}
div.regreasons {
    text-align: center;
    font-weight: bold;
    padding-left: 10px;
    padding-right:10px;
}
div.box145 { 
    width: 145px;
    float: left;
    padding-top: 5px;
    padding-right: 0px;
    background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in { 
    background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left; 
    min-height: 100px;
    padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
    left: 0px;
}
div.advertising {
    position: relative; 
    float: right;
    width: 150px;
    height: 168px;
    left: -2px; 
    padding-right: 5px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: left;
    padding-top: 12px;
    background-color: #fff;
}
.memreg2 {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 0px;
    padding-top: 12px;
    padding-left: 12px;
    text-align: center;
}
li {
    padding-bottom: 8px;
}
div.buttonreg {
    text-align: center;
    vertical-align:bottom;
}
#faq {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    text-align: justify;
    text-align:center;
}
* html #sales {
    margin-left: 0px;
}
#sales {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 367px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
}
#joining {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 535px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#control_panel {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 480px;
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#minimnu {
    position : relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: left;
}
#focusContainer {
    width: 190px;
    margin: auto;
    background-color: #71707f;
    padding: 17px 17px 10px 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#focusContainer a {
    display:block;
    background-color: #383737;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
}
#focusContainer a:hover {
    background-color: #ffa500;
    color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
    padding-left: 10px;
    color: #fff;
    width: 100%;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.span {
    padding-left: 10px;
    color: #fff;
    width: 150px;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 15px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
a#selected, a#selected:hover {
    background: #ffa500;
    color: blue;
}
a.newshead  {
    text-decoration: underline;
}
#leftside {
    position: relative;
    float: left;
}
.rbsworldpay {
    position: relative;
    display: block;
    width = 100%;
    text-align: center;
    margin-left: 2px;
}
#clubinfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: blue;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
}
#meminfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: yellow;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px
}
.moreinfo {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}
#bottomlink {
    color: #0d7acf;
    height: 48px;
    padding: 0px;
}
a.club_details {
    color: blue;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 12pt;
    text-decoration: underline;
    text-align: center;
}

Answer 1

回复您帖子中唯一的问题 “那里有人可以提供帮助吗？”

是

Answer 2

确保您的HTML具有DOCTYPE，以触发IE6的标准模式。这可能会消除很多CSS疯狂（可能会引入一些其他的疯狂，但会有更少的疯狂，并且它会在所有浏览器中发生）。

Answer 3

为避免出现浏览器行为异常，我建议您使用CCS重置。

Eric Meyer解释得很好并在meyerweb提供了一个免费的例子。这不会解决你所有的问题，但肯定是一个好的开始。

Answer 4

我马上看到的一些事情。

您没有为div #sales中的h2设置字体大小，IE使用更大的字体大小。 IE6使用宽度和高度作为建议，并将扩展div以适合内容。

您的.box335in的宽度为220px，但.member_title div的宽度为220px，右侧的填充为40px，总宽度为260px。 IE6再次扩展.box335in以适应更宽的宽度。

Answer 5

我不再担心让IE6与IE6兼容了。

IE6中的CSS问题

5 个答案: