解决CSS定位错乱/疑难杂症的终极绝招==》从样式污染开始排查

我们接手他人或者第三方项目的时候，有时候会遇到一些莫名其妙的问题：

明明自己的样式写的没有问题，但是网页上却显示的乱七八糟的，或者效果完全出不来。

案例如下：

 这里只用了很典型的flex弹性布局，并没有很特殊的配置

 为什么会出现li元素img图片全部不能显示的问题呢，然后继续定位出现问题的img元素的样式：

 经过仔细查找，终于找到了问题的原因：来自轮播图的一个样式：

.scroll img {

 top: 0;

 left: 0

 }

 这个样式会将所有图片顶到左上角，而这个样式来自于轮播图，由于没有正确限制样式的影响范围，导致它扩散到其他元素中，所以图片就没法正常显示了。

这个就是样式污染造成的css布局问题。

解决办法：将污染的样式限制到合理的作用范围：

/* 此处是解决侧边栏划出菜单：li列表只能显示一张图片的问题
  注意样式污染问题：不能使用.scroll img，否则会出现样式污染，因为引入额外的定位，导致其他地方图片不能正常显示。
*/
/* 将该样式的作用范围限制在轮播图内，不要扩散到其他元素，污染它们的样式，造成显示问题 */
.scroll  #scroll  img { // 之前是.scroll img
  width: 1226px;
  position: absolute;
  top: 0;
  left: 0;
}

再来看一个例子：

 从html结构来看，应该是a标签内部：图片和p标签各占一行，且文字在图片下方。

但是结果却是： p标签文字跑到了a标签的左上方。

现在看起来应该p标签的样式出了问题，然后继续定位p标签的样式：

 在这里发现了样式污染的来源：

#nav p {
  float: left;
  margin: 0 20px;
}

正是这个其他地方的p标签样式，扩散到这里来，导致文字显示错乱。

取消勾选该样式，显示就能正常

解决办法： 通过css标签选择器严格限制该样式的作用范围，问题得以解决。

 

总结： 如果出现了html元素定位错乱/显示不正常， 在自身代码写的没有问题的情况下，一定要通过chrome的开发者工具，重点观察：出问题的元素是否有：污染的样式渗入。

如果能够定位到样式污染源，正确限制该样式的作用范围，就能解决问题。