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

柔情只为你懂 2023-10-15 21:28 6阅读 0赞

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

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

案例如下：

![3eb16b325b1b4bc88648631f9f89223e.png][]

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

![7f034698b301491c8fbd40bc4b4e1de1.png][]

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

![2d0d30e8d34744e586af9c98d99a2883.png][]

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

> .scroll img \{
> 
> top: 0;
> 
> left: 0
> 
> \}

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

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

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

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

再来看一个例子：

![67bcbcb5dc8642a698a7c024f1721077.png][]

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

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

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

![0874f2419d1a45dba12d03a70c87c4e2.png][]

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

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

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

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

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

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

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

[3eb16b325b1b4bc88648631f9f89223e.png]: https://img-blog.csdnimg.cn/3eb16b325b1b4bc88648631f9f89223e.png
[7f034698b301491c8fbd40bc4b4e1de1.png]: https://img-blog.csdnimg.cn/7f034698b301491c8fbd40bc4b4e1de1.png
[2d0d30e8d34744e586af9c98d99a2883.png]: https://img-blog.csdnimg.cn/2d0d30e8d34744e586af9c98d99a2883.png
[67bcbcb5dc8642a698a7c024f1721077.png]: https://img-blog.csdnimg.cn/67bcbcb5dc8642a698a7c024f1721077.png
[0874f2419d1a45dba12d03a70c87c4e2.png]: https://img-blog.csdnimg.cn/0874f2419d1a45dba12d03a70c87c4e2.png