填充问题 IE8 v IE7答案

【问题标题】：Padding issues IE8 v IE7填充问题 IE8 v IE7
【发布时间】：2010-08-24 23:39:18
【问题描述】：

我已经阅读了很多关于我在 IE8 和更早版本 (IE7,6) 之间遇到的填充问题的帖子。我已经尝试过如前所述重置我的 CSS，但没有运气。任何帮助将不胜感激。提前致谢！

这个问题最好用截图来说明（见下文），但在我附上的 css 中，我相当确定问题存在于 header_left 和 header_center 的填充中，这在 IE6/7 中没有正确反映.我的网站总宽度加起来总是 980 像素，所以我的数学没问题...

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

【问题讨论】：

标签： css internet-explorer-8 internet-explorer-7 padding ie8-compatibility-mode

【解决方案1】：

那真的是你的完整 HTML 吗？如果是这样，则您处于没有文档类型的怪癖模式。还要记住，IE6 不像 IE7 那样工作，而 IE8 不像 IE9 那样工作。（祝我们大家好运！）

【讨论】：

DOCTYPE 声明是赢家！谢谢 - 我是 HTML/CSS 新手。

【解决方案2】：

首先没有doctype，您正在以怪癖模式运行。

其次，我不太确定您的问题是什么……是 HR 上方和下方的填充打破了右侧的灰色条吗？如果是这样，可以通过快速重置 HR 来解决此问题。

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

【讨论】：

【解决方案3】：

我会在碰到右侧边栏的元素上添加一个overflow-x:hidden;，例如您的内容 div 或其他任何内容，以确保它不会超过您分配给它的任何像素，因为 IE6/IE7 允许元素超过宽度。

如果不这样做，jsfiddle 也有助于直观地看到问题。

【讨论】：