3

我读过一堆以前的帖子,处理我在IE8和早期版本(IE7,6)之间遇到的填充问题。如前所述,我已经尝试重置我的CSS,但没有运气。任何帮助将不胜感激。提前致谢!填充问题IE8 v IE7

这个问题最好用截图(见下文)说明,但在我附加的CSS中,我相当确定问题存在于header_left和header_center中的填充位置,这在IE6/7。我完全网站的宽度总是加起来980px,所以我的数学是确定...

IE6或7(问题) alt text

IE8(没问题) alt text

这里是我的HTML代码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
<title>Application Form</title> 
<link href="xyx.css" rel="stylesheet" type="text/css" /> 

</head> 
<body bgcolor="#999999"> 
<div class="wrapper"> 

<div class="header_separator"></div> 

<div class="header_left"></div> 

<div class="header_center"> 
<h2> Lorem ipsum dolor sit amet</h2> 
    <h2> consectetur adipiscing elit </h2> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet.</p> 
</div> 

<div class="header_right"></div> 

<div class="header_separator"> 
<hr align="center" color="#00B050" size="5"> 
</div> 

<div class="body_left"> 
<h3> Lorem ipsum dolor:</h3> 
    <ul class=noBulletIndent> 
     <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet. Donec eu tellus eu augue pellentesque venenatis ac v</li> 
     </ul> 
</div> 

<div class="body_right"> 
<form action="insert.php" method="post"> 
<table width="630" border="0" cellspacing="0" cellpadding="0"> 
<tr height=40 valign="top"> 
<td width="200"><p><strong>Company Name:</strong></p></td> 
<td width="430"><input name="companyname" type="text" id="companyname" size="40" /></td> 
</tr> 
<tr height=40 valign="top"> 
<td width="200"><p><strong>Company Website:</strong></p></td> 
<td width="430"><input name="website" type="text" id="website" size="40" /></td> 
</tr> 
<tr height=125 valign="top"> 
<td width="200"><p><strong>Company Description:</strong></p></td> 
<td width="430"><textarea name="description" id="description" rows="6" cols="40"></textarea></td> 
</tr> 
<tr height=40 valign="top"> 
<td width="200"><p><strong>Primary Contact Person:</strong></p></td> 
<td width="430"><input name="contactperson" type="text" id="contactperson" size="40" /></td> 
</tr> 
<tr height=40 valign="top"> 
<td width="200"><p><strong>Contact Person Email:</strong></p></td> 
<td width="430"><input name="contactemail" type="text" id="contactemail" size="40" /></td> 
</tr> 
<tr height=40 valign="top"> 
<td width="200"><p><strong>Contact Person Phone:</strong></p></td> 
<td width="430"><input name="contactphone" type="text" id="contactphone" size="40" /></td> 
</tr> 
<tr> 
</table> 
<table width="630" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="300"> 
<?php 
     require_once('recaptchalib.php'); 
     $publickey = "xyz"; 
     echo recaptcha_get_html($publickey); 
?> 
</td> 
<td width="330" align="left" valign="bottom"> 
<input type="image" name="submit_acre" id="submit_acre" src="images/acre_submit.png" /> 
</td> 
</tr> 
</table> 
</form> 
</div> 

</div> 
</body> 
</html> 

这里是我的xyz.css:

@charset "utf-8"; 
/* CSS Document */ 
.mainbody{ 
    margin-left: auto; 
    margin-right: auto; 
    width:980px; 
    word-spacing: normal; 
} 
.wrapper { 
    height: 100%; 
    width: 980px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.header_separator { 
    background-color: #FFF; 
    height: 10px; 
    width: 980px; 
    float: left; 
    vertical-align: middle; 
} 
.header_left { 
    background-color:#FFF; 
    height:122px; 
    width:110px; 
    float: left; 
    vertical-align: middle; 
    padding-left: 10px; 
}      
.header_center { 
    background-color: #FFF; 
    height: 122px; 
    width: 630px; 
    float: left; 
    font-family: arial; 
    vertical-align: top; 
    text-align: left; 
    padding-left: 10px; 
    padding-right: 10px; 
} 
.header_right { 
    background-color: #FFF; 
    height: 122px; 
    width: 210px; 
    float: left; 
    vertical-align: middle; 
}   
.body_left{ 
    background-color:#FFF; 
    height:490px; 
    width:300px; 
    float:left; 
    font-family: arial; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
}      
.body_right{ 
    background-color:#FFF; 
    height:490px; 
    width:650px; 
    float:left; 
    padding-top: 10px; 
    padding-left: 10px; 
} 
.noBulletIndent { 
    padding: 0px; 
    margin-left: 12px; 
    margin-top: 0px; 
} 
p { 
    margin: 0px; 
    padding: 0px; 
    font-family: Arial; 
    font-size: 14px; 
} 
h2 { 
    margin: 0px; 
    padding: 0px; 
    font-family: arial; 
} 
h3 { 
    margin: 0px; 
    padding: 0px; 
    font-family: arial; 
    font-size: 15px; 
} 
li { 
    margin: 0px; 
    padding: 0px; 
    font-size: 14px; 
    margin-left: 4px; 
} 

回答

4

这真的是你的完整HTML吗?如果是这样,你在怪异模式没有文档类型。另外请记住,IE6不能像IE7那样工作,IE8不能像IE9那样工作。 (祝大家好运!)

+0

DOCTYPE声明是赢家!谢谢 - 我是HTML/CSS的新手。 – user387049 2010-08-24 15:44:13

-1

我会把一个overflow-x:hidden;是撞到右侧的边栏的元素,如您的内容股利或什么,以确保它不会超过whatevermany像素您分配它,因为IE6/IE7允许元素超出宽度。

一个jsfiddle也可以帮助直观地看到问题,如果不这样做。

0

首先没有doctype你运行在怪癖模式。

其次,我不太确定你的问题是什么......是人力资源部分上下的填充是否正在分解正确的灰色条?如果是这样,可以通过快速重置人力资源来解决这个问题。

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