IE7 HTML/CSS margin-bottom bug
以下是场景:
我有一张19像素的桌子。下面我有一个包含一些字段集的表单。其中一个是向右浮动的。问题是边缘底部在IE7中没有得到完整的19px。我已经经历了所有的IE7CSS/Margin/Float错误,我可以想到这些错误,并尝试过补救措施,但都没有成功。我在谷歌上搜索了一段时间,没有找到任何有用的东西。
这是我试过的。
我知道还有一些我忘记了,但这些是我最近尝试过的。每个字段集都会发生这种情况。
我使用的是重置样式表和XHTML过渡doctype。
编辑:我还有IE7WebDeveloper工具栏和Firebug。两种浏览器的样式信息都显示它有一个底部的边距:19px;但显然不适用于IE7。
一个
删除和插入的CSS样式为
解决这个问题,它在我的案例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> <form method="post" action="test.html" id="myform"> |
如果你有unfloated floated和元素的唯一方式,确保surefire垂直空间之间的跨浏览器的设置,他们是顶在随后的元素。
如果你把浮在下面的表元素的边缘,不会出现?
我把你的描述,我有它在我的渲染。它可能是你有一个地方这是你的风格的影响对你的形式,或您的表。如果你不这样做时,使用一reset.css文件是非常有用的。如果你想这是一个特定的海洋风格的影响因素,在Web开发工具栏的Firefox有一个看到的是手机信息指挥风格样式(从文件/块/内联样式样式)被应用到它。你可以激活它
这里是一个为我工作的代码:在IE7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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" /> Test <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> |
你有一个有效的doctype?本renders IE7在怪癖模式中基本上是IE5.5
我不知道确定的测试,但没有尝试将本之间的表和字段集。
1 | <br style="clear:both;" /> |