复用相同HTML且共用CSS的页面模块跨页显示异常如何解决？

效果对比 #

相关代码 #

CSS #

.main-section {
  position: relative;
}

.main-img-div {
  /* background-image: url("img/pexels-nerfee-mirandilla-3186654.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        height: 300px;
        width: 100%;
        margin: -5px -10px -10px -5px;
        overflow: hidden;
        */
  height: 300px;
  width: 100%;
  overflow: hidden;
  align-content: center;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-img {
  object-fit: contain;
  position: relative;
  width: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: brightness(50%) blur(1px);
}

.main-img-content {
  color: white;
  text-shadow: 0px 2px 2px rgb(0, 0, 0);
  position: absolute;
  /*top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin-bottom: 30px;
  margin: 20px;
  padding: 20px;
  text-align: center;
}

.main-button {
  margin-top: 20px;
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 20px;
  border: 4px solid white;
  background-color: rgba(0, 0, 0, 0.4);
  transition: ease-in 0.3s;
  cursor: pointer;
  margin: 10px;
}

.main-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

.main-img-text {
  font-weight: 700;
  font-size: 2em;
  text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.57);
}

HTML #

<div class="main-section">
  <div class="main-img-div">
    <img src="style/img/pexels-nerfee-mirandilla-3186654.jpg" class="main-img" alt="我们提供的餐品图片">
  </div>
  <div class="main-img-content">
    <p class="main-img-text">
      想要一站式尝遍全球各地美食？来这里就对了！点击按钮查看我们的餐品详情。
    </p>
    <br>
    <a href="#" class="main-button">进入厨房</a>
  </div>
</div>

可能的原因 #

• 父级元素样式继承差异：两个页面中.main-section的父容器配置不同，可继承属性如字体大小、行高会直接影响模块样式，比如代码里.main-img-text用了2em相对单位，父元素字体大小不同的话文字尺寸会有明显差异；此外如果父元素有定位相关配置，也会影响内部绝对定位的.main-img-content的位置。
• 样式优先级冲突：其中一个页面存在内联样式、页面内嵌style标签规则，或者更高权重的选择器（比如页面对应的专属类名嵌套了模块类名），覆盖了共用CSS的规则。
• 资源加载差异：两个页面的目录层级不同，代码里用了相对路径style/img/pexels-nerfee-mirandilla-3186654.jpg，如果其中一个页面不在根目录，就会加载失败出现占位图，导致布局错位。
• 页面基础声明不一致：两个页面的DOCTYPE、meta viewport等头部声明不同，会触发浏览器不同的渲染模式，盒模型计算规则出现差异。
• 类名冲突：另一个页面存在同名类，规则和共用CSS中的配置不同，覆盖了模块样式。
• 缓存问题：其中一个页面加载的是旧版缓存的CSS文件，没有同步最新的样式规则。

排查步骤 #

1. 打开浏览器开发者工具（F12），选中两个页面的同一个模块元素，对比样式面板的生效规则，看是否存在被划掉的被覆盖样式，快速定位冲突规则。
2. 查看开发者工具网络面板，确认图片等静态资源是否加载成功，资源路径是否一致。
3. 切换到开发者工具计算属性面板，对比两个页面模块各元素的宽高、边距、定位等计算值是否完全一致。
4. 按Ctrl+Shift+R强制刷新页面，排除本地缓存导致的样式不一致。
5. 对比两个页面的HTML头部声明，确认DOCTYPE、meta标签等配置完全一致。

内容的提问来源于stack exchange，提问作者Anđelo Motika