by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2951

更新于2019-04-22

IE浏览器下，包括Edge浏览器，表单元素相关伪类，例如:valid，:invalid等无法让兄弟元素样式即时渲染（通过+或者~等兄弟选择符设置），也可以使用本文介绍的方法修复。

一、JS交互下的动态bug

我们平常在页面布局时候探讨的bug大多都属于静态的——即页面载入渲染完毕后出现的布局问题，像是错位啊，不对齐啊，行高失效等。
这些都是嚼了好多年的烂芋头，就像风水日晒很多年的门面店，是个装修工都能美化修复，不值得拿出来卖弄。

还有一类bug是伴随着JS交互产生了，比方说一个外表靓丽光鲜的门面店，只要门一开，尼玛，天花板就会挂到门上去了。此时该怎么办？是靠装修工打补丁美化解决？

可能有时候可以，可能有时候就搞不定，或者成本过高，有没有什么通用方法可以修复这类JS互产生的bug呢？

人类一思考，上帝就发笑
我不信上帝，我喜欢思考！

我是这么想的：
既然页面刚在载入的时候，布局正常；JS触发布局改变后，布局嗝屁！说明，本身的渲染是没有问题的，有可能是JS交互的时候，局部没有渲染或者没有回流等。于是，我就有了这样一个解决思路：在JS交互的时候，通过某些设置，让这部分有bug的布局重绘一下，会不会就好了呢？？

上面说得可能有些拗口，举个恶俗的例子：
只喝旺仔牛奶，拉出的shi是香的；再喝猛牛牛奶，拉出的shi就是臭的！说明本身的消化是没有问题的，有可能是再喝猛牛牛奶的时候，有部分旺仔牛奶没有消化。于是，我有了这样一个解决思路：在喝猛牛牛奶的时候，通过某些设置，让旺仔牛奶重新消化一下，shi会不会就香了呢？？

//zxx: shi =

让我们来看看下面这两个具有代表性的演示！

二、重绘解决IE8 inline-block容器不撑开bug

这是个挺有意思的bug. 描述如下：
从外到内有A, B, C三层容器，其中，A容器 display:inline-block;，此时，当C容器高度增加的时候，A容器的高度并不会跟着增加，如下示意：

您可以狠狠地点击这里（需要IE8浏览器）：IE8 inline-block bug演示以及修复demo

两个<a>标签链接都会触发展开与收起效果，其中前面一个按钮用来显示bug，后面一个已经做了修复。

点击前面按钮，就会下面这个样子——后面的文字浮在了展开的元素的上面，也就是最外部容器的高度并没有被撑开！

点击后面按钮，则是下面这个样子——后面“等shi”的文字位置正常显示了，也就是外部容器的高度撑开了！

OK，后面的按钮到底做了什么，使得bug没有了，很简单，在展开与收起的时候，顺便触发了一下最外部inline-block容易的重绘！关键JS代码如下：

eleBox.style.visibility = "inherit";	

eleBox.style.visibility = "visible";

通过设置完全不影响效果的visibility属性值，触发重绘，让布局正常！

关于重绘触发
对元素设置style样式，或者其他属性，或者类名改变，甚至有时候获取属性都会触发重绘。我比较用的多的触发方法有两个：一个是visibility属性值的改变visibile/''/inherit.（不会引发回流，参见这篇文章），另外一个就是element.calssName = element.className;

有时候，上面两个触发都不适合使用，您就可以试试其他属性，good luck!

三、重绘解决IE6 relative元素不跟随bug

这也是很让人头疼的一个bug. 问题描述：IE6浏览器下，当relative元素存在嵌套关系的时候，其中存在高度变化时候，某些情形下（需祖籍无relative等条件），relative元素会保留着原始位置。

这是个不太容易重现的bug，但是我做到了，哈哈！

您可以狠狠地点击这里（IE6浏览器）：IE6 relative元素跟随bug以及修复demo

点击demo页面任意文本框， 高度会增加，失去焦点，高度还原。其中，第二段对话列表是有bug的，最后第三段则是bug修复列表。至于第一段，是为了好看打酱油的。

下图bug效果产生的操作顺序是，点击中间第2个文本框，再点击第1个，然后焦点失去，即产生，如下：

您会发现，最后一个列表的文本框无论是怎么点击，都不会出现重叠的问题，如何解决的，很简单——触发重绘，关键JS代码如下：

if (this.getAttribute("data-fixed")) {
    eleUlTarget.className = eleUlTarget.className;    
}

就是让外部的<ul>标签的className重新赋一下，有些看似诡异棘手的bug解决起来其实就这么简单。

四、重绘解决IE6/IE7 relative+float应用top值后margin失效问题

注：本条目更新于2013-05-13 感谢 @hawklim 提供问题描述。

问题如下：
IE6/IE7浏览器下，relative属性元素，如果含float以及margin值，使用JS应用类似top值之后，margin值失效（等同于0）。

您可以狠狠地点击这里：重绘解决IE6/IE7 relative下margin失效demo

demo中，点击第一个按钮，绿色盒子应用top: 100px的相对定位，结果margin-left效果没有了！

demo第二个按钮是带修复的，修复方法就是给父容器来了个className改变-通过新增一个无用的class类名。代码如下：

$(this.parentNode).addClass("repain");

于是，效果是这样子：

补充于2017-03-06
使用[checked]属性选择器和+/~相邻兄弟选择器实现基于原生单复选框的模拟单复选框效果的时候，当我们使用JS添加或删除[checked]属性的时候，后面模拟的单复选框效果样式是不会跟着变的。此时，需要触发重绘来解决，切换任意一个类名，例如：

$('input').parent().toggleClass('zzzzz');

五、不是酱油的结束段

以前的结语段都是客套话，可有可无，今天的，嘿嘿，有料！

关于思维方向
人可能都有这样的思维习惯：解铃还须系铃人。比方说，这是页面CSS渲染造成的问题，我们都会从CSS的层面去解决这个问题，这是人之常情，我自己也跳不出这个圈子。只是，当我们这类解决遇到障碍的时候，能否“倒立”一下，换个角度看问题，不找系铃人，而是找造铃铛的人，有时候，问题解决会更麻利些。所谓，思维的广度与发散性！

问题本身
本文多展示的两个bug, 从CSS或HTML等静态层面都是可以修复的，但是，或破坏原本优良的结构，或者冗余更多糟糕代码（例如IE6那个问题可以在第一个父级ul标签上添加position:relative;_zoom:1;——增加更多的relative嵌套）。

实际的页面远比demo复杂，CSS或HTML层面的折腾来折腾去可能要花费很多的时间，或者造成其他一些问题。在这种情形下，在JS交互中格外增加一行code，简单重绘一下，显然是最佳的处理方法。

推荐您试试！

就这些，希望能对你的学习有所帮助，感谢阅读！

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2951

（本篇完）