IE8 切换错误？

Posted 2023-02-22

【中文标题】IE8 切换错误？

【英文标题】：IE8 Toggle Bug?

【发布时间】：2011-01-06 21:18:14

【问题描述】：

我认为我在使用 IE8 时遇到了问题，这让我发疯了。 让我用图片和在线演示来解释一下。

当您第一次访问该页面时，如下所示一切正常

a http://yasinergul.com/FlashDen/IE8-Toggle-Bug-Demo/image/a.jpg

然后，当您单击“单击此处添加新的”按钮时......它会显示一个包含表单的 div......直到现在它仍然可以正常工作，如下所示......

b http://yasinergul.com/FlashDen/IE8-Toggle-Bug-Demo/image/b.jpg

当您单击“取消”按钮时，它会隐藏表单...但是这次“这里的一些文本”部分折叠到上面的格力框..

c http://yasinergul.com/FlashDen/IE8-Toggle-Bug-Demo/image/c.jpg

但是当您尝试选择页面上的任何文本或单击页面上的任何空白区域时，“此处的某些文本”会返回到正常位置...

奇怪的是，由于链接上有一个切换功能，您还可以使用“单击此处添加新的”链接关闭表单，当您单击“单击此处添加新的”链接关闭表单时它工作正常...

我也尝试过使用 show()、hide() 方法或 addClass()、removeClass() 以及包含“display:none”的类...我也尝试过 toggleClass()，但没有运气.. .

我认为这是关于 IE8 的渲染引擎，但可能是您的 html-CSS-jQuery 大师可能知道一种解决方法...

http://yasinergul.com/FlashDen/IE8-Toggle-Bug-Demo/

最好的问候， PDesignX

【问题讨论】：

不确定原因，但还有一些有趣的东西。如果您使用 IE8 开发人员工具并从 #box-add div 中删除隐藏类（在单击添加链接之前），则“单击此处添加新的”链接会显示问题，单击“取消”可以正常工作.

是的，我也注意到了......所以它不是在显示或隐藏的 div 内。

【参考方案1】：

删除inf-box的margin-bottom并在包含“Some text here”的div中添加padding解决了这个问题......据说这是一个“collapsing margin”问题......

你可以在这里找到关于它的详细描述

http://css-discuss.incutio.com/?page=CollapsingMargin