填充问题IE8 V IE7
题
我已经阅读了许多以前的帖子,这些帖子涉及我在IE8和更早版本之间遇到的填充问题(IE7,6)。我已经尝试如前所述重置我的CSS,但没有运气。任何帮助将不胜感激。提前致谢!
最好用屏幕截图(见下文)来说明问题,但是在我附加的CSS中,我可以肯定的是,问题位于header_left和header_center中的填充物中的某个地方,在IE6/7中未正确反映。我的网站完全宽度总是总计980px,所以我的数学还可以...
IE6或7(问题)
IE8(没有问题)
这是我的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;
}
解决方案
这真的是您完整的HTML吗?如果是这样,您处于怪癖模式,没有医生。还要记住,IE6不像IE7那样工作,而IE7不像IE8那样工作,而IE8无法像IE9那样工作。 (祝大家好运!)
其他提示
首先没有 Doctype 您正在以怪异模式运行。
其次,我不太确定您的问题是什么...它是在人力资源上方和下方打破右灰色条的填充吗?如果是这样,可以通过快速重置人力资源来修复。
hr {
padding:0px;
margin:0px;
}
我会把 overflow-x:hidden;
在撞到右侧的侧边栏的元素上,例如您的内容div或其他任何东西,以确保它不会超过您分配的任何人类像素,因为IE6/IE7允许元素超过宽度。
如果不这样做,JSFIDDLE也将帮助视觉上看到问题。
不隶属于 StackOverflow