【问题标题】:Issues with "font-size: 100%"“字体大小:100%”的问题
【发布时间】:2010-11-15 21:14:09
【问题描述】:

我是 CSS 新手,如果这是一个愚蠢的问题,我很抱歉。

我正在制作一个网站并使用了这个:

body {
  font-size: 80%;
}

后来,实际上是今天,我尝试将EricMeyer's CSS reset 应用到我的页面超过 80% 声明,但这给我的字体大小造成了各种问题。

我认为这不是问题,因为我认为 font-size 100% 不会改变字体,它只是“使用你父母的字体”,但事实并非如此。

这个 font-size 100% 声明实际上是做什么的?为什么它适用于重置中的每个元素(即 html、body、div、span、a、b、i、font 等 {font-size} 而不仅仅是我使用的 body{font-size},这似乎可以继承)?


在我“只删除 100%”之前,我想知道它实际上在做什么。 100% 究竟是什么意思,为什么 Meyer 先生将它应用到一堆元素上,而不是像我一样只应用到身体上?

【问题讨论】:

    标签: css font-size css-reset


    【解决方案1】:

    使用font-size: 0.8em; 有效吗?由于 1em 是“字符的大小”,因此 0.8em 应该可以满足您的需求。

    【讨论】:

    • 是的。对于相对字体大小,请使用 em 而不是百分比。
    • 我在身体上使用 80% 或 0.8em 都没有关系——它们的作用是一样的。问题在于 100% 重置之前适用于一堆元素。
    • 然后把100%的reset去掉?
    • 我试图弄清楚它的作用。他将其应用于身体元素之外是有原因的,对吧?
    【解决方案2】:

    您的问题是 Meyer 将更多且只是 body 元素设置为 100%。

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    

    快速解决方法是将 Meyers font-size: 100%; 更改为 font-size: 80%;

    字体大小:100%;只是用于在所有浏览器中将样式重置为相似,我相信IE6对此有一些问题。

    【讨论】:

    • 如果我在 Meyers 重置中将字体大小更改为 80%,页面上的所有内容都会变得太小而无法阅读。
    • 哦,我忘了他们是相对的。为什么要应用此重置?只是因为你真的不太需要它们而问,有些人甚至说它们很糟糕。 meiert.com/en/blog/20080419/reset-style-sheets-are-bad
    • 因为我认为它们应该使浏览器之间的内容更加一致。公平地说,其他一切似乎都非常简单,但正是这种字体让我很生气。我不明白继承 100% 甚至会改变大小,更不用说为什么它只会真正影响某些元素。在这一点上,我的目标更多是了解 wtf 正在发生的事情,而不仅仅是“解决问题”。我喜欢知识。我想要更多。我就是想不通这里的问题,这让我发疯了。
    • 这是事实,但它们也可能弊大于利。我相信100%是为了修复一些IE继承的bug。输入 16px、80% of 16px = 12.8px 之类的数字应该没问题。所以你可以定义 12.6px 作为你的正文字体,它应该和以前一样。还要记住,同样在 reset 中的 HTML 在 body 之前。
    • 我将把它设置回只有正文的字体大小,让正常的继承发挥它的魔力。如果 IE 变得时髦,我将添加一些仅限 IE 的 CSS 来修复它。我只是希望我知道发生了什么事。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-11
    • 2011-02-11
    • 2011-03-28
    • 2023-03-07
    • 2021-06-13
    • 2013-09-20
    • 2021-08-22
    相关资源
    最近更新 更多