时间戳

首页 > 解决方案 > 相同的字体大小，不同的渲染大小

html - 相同的字体大小，不同的渲染大小

问题描述

在我的页脚里面我有 2 个 div。在这两个 div 中都有一个p带有一些文本的内容。然而，第二个中的文本div要大得多，即使它们应用了相同的 css。

如果我在浏览器中禁用 font-size 属性，所有文本都会变小，但是底部 div 中的文本会变大...

看看img结果：奇怪的结果

我希望所有文本的大小都相同。

<div class="footer">
  <div class="info">
    <div>
      <p>
        <b>KSA Nationaal</b>
      </p>
      <p class='spacer'>02/201.15.10</p>
      <p>Vooruitgangstraat 225</p>
      <p class='spacer'>1030 Brussel</p>
      <p class="spacer">
        <a href="http://www.ksa.be">www.ksa.be</a>
      </p>
    </div>
    <div>
      <p>
        <b>De leukste safari van 2018!</b>
      </p>
      <p>Joepie 28</p>
      <p>16-19 april</p>
      <p class='spacer'>Sjo’ers, simmers en jonghernieuwers</p>
      <p>
        <b>Contact</b>
      </p>
      <p class="spacer">
        <a href="mailto:joepie@ksa.be">joepie@ksa.be</a>
      </p>
    </div>
    <div>
      <img src="http://www.ksa.be/sites/all/themes/custom/tksa/img/logos/logo-blauw.png">
    </div>
  </div>
  <div class="legal">
    <p>
      Deze website kwam tot stand dankzij: Mira Sabbe: lay-out website • Maarten Derous: illustraties • Yann Provoost: ontwikkeling
      website
    </p>
    <p>© 2018 KSA Nationaal - Alle rechten voorbehouden</p>
  </div>
</div>

和CSS：

p{
    font-size: 1.8rem !important;
}

.footer {
    width: 100%;
    box-sizing: inherit;
    background-color: $purple;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    p {
        color: white;
    }
    a {
        color: white;
    }
    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 1rem 9rem 1rem 9rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        p {
            margin: 0;
        }
        .spacer {
            margin-bottom: 1.4rem;
        }
    }
    .legal {
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0 9rem 0 9rem;
        width: 100%;
        text-align: center;
    }
}

找到的解决方案：将元素的text-size-adjust属性设置为pnone

标签： htmlsass

解决方案

JSFiddle中的代码是您提供给我们的代码，它的行为应该如此，但我怀疑错误将出现在您没有透露的 CSS 文件或标记中。

检查您的<head>...</head>标签是否有任何链接的 CSS 文件，这些文件可能会在任何具有“合法”类的 div 上强制使用样式。

另一种选择是在您与 !important 共享的 CSS 中为 .legal 类的所有元素添加后缀（以及您的 P{ ... }，如下所示；

.legal {
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 9rem 0 9rem !important;
    width: 100% !important;
    text-align: center !important;
}

在你的 CSS 底部还有一些流氓右括号。

推荐阅读