为什么<strong>标签无效但CSS有效？

Question

<span class="bold">Some Title</span>

.bold
{
    font-weight:bold;
}

这会以粗体字呈现，但这段文字：

<strong>Some Title</strong>

不会。文本只是正常渲染而已。我正在使用HTML5 doctype和Google字体：

<link href='http://fonts.googleapis.com/css?family=Droid+Sans&v2' rel='stylesheet' type='text/css'>

有人也遇到过这个问题吗？

编辑：BoltClock建议可能是CSS重置的问题，这是<strong>的代码块：

/** CSS Reset **/
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

- Tom Gullen

---

你是否有一个CSS重置，忘记“重置” strong 样式的？ - BoltClock

如果您正在尝试在jsfiddle中进行此操作，请取消选中“规范化CSS”。 - Molecular Man

@Bolt 是的，我是！但我不确定这会如何干扰？ - Tom Gullen

我发布了一个答案来解释。 - BoltClock

Answer 1

如果在strong标签中没有其他样式，则问题就出在这里了（或者说，是CSS重置的问题）。

font:inherit样式与所有这些选择器一起，要求所有元素从其父元素继承所有字体样式。默认的字体加粗程度显然是normal，因此强调文本不再以加粗方式呈现，直到你重新声明它：

strong { font-weight: bold; }

（其他需要重置样式的明显元素包括b，em，i ，代码元素，引用元素，表格，标题，列表等。）

- BoltClock

---

简而言之，inherit 意味着从父元素继承，而不是继承浏览器的默认值。 - BoltClock

Answer 2

添加：

strong{
 font-weight:bold;
}

可能是您在CSS中对该标签进行了重置。

- avall

Answer 3

正如BoltClock所解释的那样，这些复位不仅重置填充和边距，font:inherit还可能破坏浏览器显示正确字体样式的默认行为。

- Pavel Hasala

Answer 4

除了BoltClock的回答之外，我还发现我们必须使用完整的标签名称来关闭标签，否则之后使用的STRONG标签将无法正常工作。 例如，

<H1>标题</H1>

instead of,

标题

- vikrant

---

</>实际上是有效的情况吗？我真的很好奇。 - Chris

看起来它们不是有效的。 - vikrant

我认为这个问题讨论的是自闭合标签，比如 <img /> - 我对使用 </> 感到好奇。 - Chris

</>或<img/>根据规范是无效的，但浏览器仍然可以呈现它。应该像这样：<img></img>。它在“结束标签”部分下，请看：http://www.w3.org/TR/html5/syntax.html#void-elements - vikrant

Answer 5

对我来说，问题出在 Angular Material 的 .mat-option 类上，由于某种原因，使用 <b> 或 <strong> 无法修改它们的字体。将它们的字体更改为其他字体解决了我的问题。

- Yair Cohen