IE7 HTML / CSS边缘错误
时间：2020-03-05 18:40:32 来源:igfitidea点击:
这是场景：
我有一个表的底边距为19px。在此之下，我有一个包含一些字段集的表单。其中之一漂浮在右边。问题是，margin-bottom不能在IE7中获得完整的19px。我经历了所有我能想到的IE7 css / margin / float错误，并尝试了补救措施但未成功。我已经搜寻了一段时间了，找不到任何有帮助的东西。
这是我尝试过的。
- 在无样式的div中包装表单或者字段集。没有明显的变化。
- 在表格的边缘底边加上一个div，然后将其用div包裹起来，并将其底边填充为19px。没有明显的变化。
- 在表格的下边空白处添加一个固定高度为19px的div。没有明显的变化。
- 在表和字段集之间放置一个空格。
我知道还有其他一些我会忘记的东西，但这就是我最近尝试过的东西。这发生在每个字段集。
我正在使用重置样式表，并且具有xhtml过渡文档类型。
编辑：我也有IE7 Web开发人员工具栏和Firebug。两种浏览器的样式信息均显示其底距为：19px；但显然不适用于IE7.
解决方案
回答
我们有有效的文档类型吗？否则IE7会以怪异模式呈现，这基本上是IE5.5
回答
我整理了我们在此处描述的内容，它正适合我。我们可能在某处具有另一种样式，这会对表单或者表格产生影响。如果我们还没有这样做，那么使用reset.css文件非常有用。如果要查看哪些样式正在影响特定元素，则Firefox的Web开发工具栏上有一个方便的"样式信息"命令，用于查看将哪些样式(从哪些文件/样式块/内联样式)应用于该样式。我们可以通过按Ctrl + Shift + Y或者点击CSS-> View Style Information来激活它。
这是在IE7中对我有用的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
#mytable {
margin-bottom: 19px;
border: solid green 1px;
}
#myform {
border: solid red 1px;
overflow: hidden;
}
#floaty {
float: right;
border: solid blue 1px;
}
</style>
</head>
<body>
<table id="mytable">
<th>Col 1</th>
<th>Col 3</th>
<th>Col 2</th>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
</tr>
</table>
<form method="post" action="test.html" id="myform">
<fieldset id="floaty">
<label for="myinput">Caption:</label>
<input id="myinput" type="text" />
</fieldset>
<fieldset>
<p>Some example content</p>
<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox">Click MEEEEE</label>
</fieldset>
</form>
</body>
</html>
回答
如果不进行测试，我不确定，但是请尝试将其放在表格和字段集之间：
<br style="clear:both;" />
回答
如果从表格下方的元素中删除浮点数，是否会出现边距？
