IE7 HTML/CSS margin-bottom 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE7 HTML/CSS margin-bottom bug
提问by mk.
Here is the scenario:
这是场景：
I have a table with a margin-bottom of 19px. Below that I have a form that contains some fieldsets. One of them is floated right. The problem is that the margin-bottom is not getting the full 19px in IE7. I've gone through all of the IE7 css/margin/float bugs that I can think of and have tried remedies but have been unsuccessful. I have been googling for a while now and cannot find anything that is helping out.
我有一张底边距为 19px 的表格。下面我有一个包含一些字段集的表单。其中之一是浮动的。问题是 IE7 中的边距底部没有获得完整的 19 像素。我经历了所有我能想到的 IE7 css/margin/float 错误，并尝试了补救措施，但没有成功。我已经用谷歌搜索了一段时间，找不到任何有帮助的东西。
Here is what I have tried.
这是我尝试过的。
- Wrapping the form or fieldset in an unstyled div. No apparent change.
- Nixing the margin-bottom on the table and instead wrapping that with a div and giving it a padding-bottom of 19px. No apparent change.
- Nixing the margin-bottom on the table and adding a div with a fixed height of 19px. No apparent change.
- Putting a clear between the table and the fieldset.
- 将表单或字段集包装在无样式的 div 中。无明显变化。
- Nixing 桌子上的 margin-bottom ，而不是用 div 包裹它并给它一个 19px 的 padding-bottom 。无明显变化。
- Nixing 表格上的 margin-bottom 并添加一个固定高度为 19px 的 div。无明显变化。
- 在表格和字段集之间清除。
I know there are some others that I am forgetting, but those are the things I have tried out recently. This happens to each fieldset.
我知道还有一些我忘记了，但这些是我最近尝试过的。每个字段集都会发生这种情况。
I am using a reset style sheet and have a xhtml transitional doctype.
我正在使用重置样式表并有一个 xhtml 过渡文档类型。
Edit:I also have the IE7 web developer toolbar and Firebug. The style information for both browsers says that it has a margin-bottom: 19px; but it clearly is not for IE7.
编辑：我还有 IE7 Web 开发人员工具栏和 Firebug。两种浏览器的样式信息都说它有一个 margin-bottom: 19px; 但它显然不适用于 IE7。
回答by mongo296
if you have floated and unfloated elements, the only surefire way to ensure vertical space between them cross-browser is padding-top on the subsequent element.
如果您有浮动元素和非浮动元素，确保它们跨浏览器之间的垂直空间的唯一可靠方法是在后续元素上填充顶部。
回答by user64bit
Replace margin-bottom: 19px;with <div/>with height: 19px.
更换margin-bottom: 19px;用<div/>用height: 19px。
Remove CSS style for margin-bottomand insert <div/>with height: 19pxbetween <table/>and <form/>
删除CSS样式margin-bottom，并插入<div/>带height: 19px之间<table/>和<form/>
It solved this problem in my case.
它在我的情况下解决了这个问题。
<table id="mytable">
<tr>
<th>Col 1</th>
<th>Col 3</th>
<th>Col 2</th>
</tr>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
</tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">
回答by Jeremy
If you remove the float from the element below the table, does the margin appear?
如果从表格下方的元素中删除浮动，是否会出现边距？
回答by Orion Edwards
Have you got a valid doctype? Otherwise IE7 renders in quirks mode which is basically IE5.5
你有一个有效的文档类型吗？否则 IE7 以 quirks 模式呈现，这基本上是 IE5.5
回答by eplawless
I put together what you described there, and it's rendering properly for me. It's likely you have another style somewhere that's having an effect on your form, or your table. If you aren't doing so already, using a reset.cssfile is extremely useful. If you want to see which styles are affecting a particular element, the Web Developer Toolbarfor firefox has a handy Style Information command for seeing which styles (from which files/style blocks/inline styles) are being applied to it. You can activate it by pressing Ctrl+Shift+Y, or hitting CSS -> View Style Information
我把你在那里描述的内容放在一起，它对我来说是正确的。很可能你在某处有另一种风格对你的表格或表格产生影响。如果您还没有这样做，那么使用reset.css文件非常有用。如果您想查看哪些样式正在影响特定元素，firefox的Web 开发人员工具栏有一个方便的样式信息命令，用于查看正在对其应用哪些样式（来自哪些文件/样式块/内联样式）。您可以通过按Ctrl+Shift+Y或点击来激活它CSS -> View Style Information
Here's the code that worked for me in IE7:
这是在 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>回答by Kevin
I wouldn't know for sure without testing but try placing this between the table and the fieldset:
如果没有测试，我不确定，但尝试将其放在表和字段集之间：
<br style="clear:both;" />
