IE7 HTML / CSS边距底部错误
[英]IE7 HTML/CSS margin-bottom bug
问题描述
Here is the scenario: 
这是场景：
I have a table with a margin-bottom of 19px. 我有一张边距为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. 问题是，在IE7中，保证金底部没有获得完整的19px。 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. 我已经完成了我能想到的所有IE7 css / margin / float错误，并尝试过补救措施，但都没有成功。 I have been googling for a while now and cannot find anything that is helping out. 我一直在谷歌搜索一段时间，找不到任何有用的东西。
Here is what I have tried. 这是我尝试过的。
- Wrapping the form or fieldset in an unstyled div. 将表单或字段集包装在一个没有样式的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. Nixing桌子上的边缘底部，而是用div包裹它，并给它一个19px的填充底部。 No apparent change. 没有明显的变化。
- Nixing the margin-bottom on the table and adding a div with a fixed height of 19px. Nixing桌面上的边缘底部并添加一个固定高度为19px的div。 No apparent change. 没有明显的变化。
- Putting a clear between the table and the fieldset. 在表和字段集之间清楚。
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. 编辑：我还有IE7 Web开发人员工具栏和Firebug。 The style information for both browsers says that it has a margin-bottom: 19px; 两个浏览器的样式信息都表明它有一个底边：19px; but it clearly is not for IE7. 但它显然不适用于IE7。
6 个解决方案
解决方案1
2 2012-11-07 10:13:08
Replace margin-bottom: 19px; 替换margin-bottom: 19px; with <div/> with height: 19px . <div/> ， height: 19px 。
Remove CSS style for margin-bottom and insert <div/> with height: 19px between <table/> and <form/> 删除margin-bottom CSS样式，并在<table/>和<form/>之间插入height: 19px <div/> <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">
解决方案2
2 2011-04-11 02:39:40
如果你有浮动和未浮动的元素，那么确保跨浏览器之间的垂直空间的唯一可靠方法是在后续元素上填充顶部。
解决方案3
1 2008-08-18 23:09:59
Have you got a valid doctype? 你有一个有效的doctype？ Otherwise IE7 renders in quirks mode which is basically IE5.5 否则IE7呈现怪异模式，基本上是IE5.5
解决方案4
1 2008-08-18 23:10:00
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.css file is extremely useful. 如果您还没有这样做，使用reset.css文件非常有用。 If you want to see which styles are affecting a particular element, the Web Developer Toolbar for firefox has a handy Style Information command for seeing which styles (from which files/style blocks/inline styles) are being applied to it. 如果要查看哪些样式影响特定元素，则firefox的Web Developer Toolbar有一个方便的样式信息命令，用于查看应用于哪种样式（从哪个文件/样式块/内联样式）。 You can activate it by pressing Ctrl+Shift+Y , or hitting CSS -> View Style Information 您可以按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>
解决方案5
1 2008-08-21 03:01:45
如果从表格下方的元素中移除浮动，是否会出现边距？
解决方案6
0 2008-08-19 00:07:23
我不确定没有测试，但尝试将其放在表和fieldset之间：
<br style="clear:both;" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.