IE6 和 IE6 上奇怪的垂直间隙使用 css 进行布局时,我的表单中的 IE7
感谢 Jonathan Amend,CSS 现已修复在下面的 iebug.html 中。
如果不在 IE6 或 IE7 中查看,很难真正解释这个问题,但无论如何,如果您查看以下页面在 IE6 和7 您会在“给我发送一本小册子”和“我想了解更多信息(勾选一个或多个框)”旁边看到复选框及其标签由于某种原因被神秘地推或拉下来:
http://sonic.huntinternet.com/iebug.html
我尝试过更改所有元素的边距和填充到 0 但这对 IE6 和 7 没有影响 - 这意味着我认为这是某种错误..但是我真的没有足够的经验来知道要寻找什么错误,所以任何类型的指针都会很好。
仅供参考,我使用了 sitepoint 网站上的指南,建议使用嵌套列表,但实际上这应该没有任何区别。根据 w3c 的验证器,xhtml 和 css 都是有效的。
感谢您的帮助! 约翰.
Thanks to Jonathan Amend, the css is now fixed in iebug.html below.
It's hard to really explain this problem without looking at it in IE6 or IE7, but anyway if you have a look at the following pages on IE6 & 7 you'll see next to "send me a brochure" and "I would like more information on (tick one or more boxes)" the checkboxes and their labels have been mysteriously pushed or pulled down for some reason:
http://sonic.huntinternet.com/iebug.html
I've tried altering the margins and padding on all my elements to 0 yet this has no effect on IE6&7 - meaning I think it's a bug of some kind.. however I don't really have enough experience to know what bug to even look for so any kind of pointer would be nice.
FYI I've used a guide off the sitepoint website that suggested using nested lists, but really that shouldn't make any difference. Both the xhtml and css are valid according to w3c's validator.
Thanks for your help!
John.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
添加 *display: inline-block;发送至您的.enquiry-form ol li。这是 IE 6/7 如何将列表项(默认情况下为块元素)清除到新行的常见错误。
Add *display: inline-block; to your .enquiry-form ol li. This is a common bug with how IE 6/7 clears list items (block elements by default) onto new lines.
为此,它被拉下来,因为您的浮动标签在副本中有两行长,因此 OL 会将其顶部位置与第二行的顶部对齐。
这里想到的一个解决方案是让 OL 也向左浮动。当然,这将要求每个 LI 上都有clearfix样式(clearfix的样式可以在这里找到:http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/)。
For this, it's being pulled down because your floated label is two lines long in copy, so the OL is aligning it's top position to the top of the second line.
A solution that comes to mind here is to make the OL floated left as well. This will, of course, require that each LI has the clearfix styles on it (styles for clearfix can be found here: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/).