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; }