为什么<b>和<i>不起作用？

Question

我有这个网站http://www.korsholm-jagtrejser.dk/

在文本中：

Korsholm Jagtrejser可以为您提供广泛的狩猎地点。

Korsholm 周围有<b>，而 jagtrejser 周围有<i>，但未显示为粗体/斜体。 我正在使用 meyerweb 重置 css，其中包括 <b> 和<i> 标签。

我的 chrome 检查器没有任何关于它不应该加粗的信息。

可以有人指出问题所在吗？

- Martin-

---

发布代码？任何与CSS重置有关的内容可能会影响您的元标记。 - cwiggo

使用 normalize 而非 reset。 - Fabrizio Calderan

Answer 1

由于 reset.css 样式表使用了 font: inherit; 属性，覆盖了浏览器的 CSS：

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: inherit; font-size: 100%; vertical-align: baseline;}

- AlienWebguy

---

CSS重置文件为什么会做出这样的决定，我无法理解。 - Bojangles

“重置”这个词你不理解其中哪一部分？reset.css 的目的是将所有样式重置为默认状态，以便您可以添加自己的样式。 - Paul Tomblin

坦白地说，现在IE7已经基本死亡，CSS重置似乎大多无关紧要 - 浏览器大多兼容。 - Eamon Nerbonne

不错的发现，@AlienWebguy - 解释了你27.4k的声望 :) - Sudipta Chatterjee

过时可能不是正确的词。不是像以前可以用现在就不能用了。只需找到另一个适合您需要的。有无数个选择。 - AlienWebguy

Answer 2

重置样式表中有一个选择器，匹配许多不同的元素，包括 b 和 i，并包含 font 属性，其中包括 font-weight 和 font-style，因此它将这些属性设置为父元素的值。此选择器的CSS样式是：font: inherit;。请注意，HTML标记已被保留。

- Quentin

Answer 3

在reset.css的第19行，b标签的'font'属性被设置为inherit。要么删除标签，要么添加新的选择器来改变字重。

- chrisboustead

---

这实际上是唯一有效的事情，从重置中删除它。 - Martin-

很高兴听到这个消息。出于这样的原因，我倾向于尽可能少地使用重置。 - chrisboustead

Answer 4

当您使用CSS重置时，它会重置所有样式。现在您需要使用CSS未重置。我建议使用Vanilla CSS Un-Reset。

这里提供完整的代码：

/**
 * Start Vanilla CSS 1.0.2 
 */ 
body {
    font: 9pt/1.5em sans-serif;
}
pre, code, tt {
    font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
}
h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: bold;
}
em, i, dfn {
    font-style: italic;
}
dfn {
    font-weight:bold;
}
p, code, pre, kbd {
    margin:0 0 1.5em 0;
}
blockquote {
    margin:0 1.5em 1.5em 1.5em;
}
cite {
    font-style: italic;
}
li ul, li ol {
    margin:0 1.5em;
}
ul, ol {
    margin:0 1.5em 1.5em 1.5em;
}
ul {
    list-style-type:disc;
}
ol {
    list-style-type:decimal;
}
ol ol {
    list-style: upper-alpha;
}
ol ol ol {
    list-style: lower-roman;
}
ol ol ol ol {
    list-style: lower-alpha;
}
dl {
    margin:0 0 1.5em 0;
}
dl dt {
    font-weight:bold;
}
dd {
    margin-left:1.5em;
}
table {
    margin-bottom:1.4em;
    width:100%;
}
th {
    font-weight:bold;
}
th, td, caption {
    padding:4px 10px 4px 5px;
}
tfoot {
    font-style:italic;
}
sup, sub {
    line-height:0;
}
abbr, acronym {
    border-bottom: 1px dotted;
}
address {
    margin:0 0 1.5em;
    font-style:italic;
}
del {
    text-decoration: line-through;
}
pre {
    margin:1.5em 0;
    white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    display: inline;
}
img.alignleft {
    display: inline;
}
.alignright {
    float: right;
    margin-left: 10px;
}
.alignleft {
    float: left;
    margin-right: 10px;
}
img {
    max-width: 100%;
}
* html .clearfix {
    height: 1%;
}
* + html .clearfix {
    display: inline-block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .group {
    height: 1%;
}
* + html .group {
    display: inline-block;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/**
* End Vanilla CSS
*/

好处是，您可以使用所需的任何内容和您不需要的内容。

- Praveen Kumar Purushothaman

---

我知道刚添加了以下代码： b, strong {font-weight:bold !important;} i, em {font-style:italic !important;} 但这根本不起作用（尝试使用!important来查看是否有任何更改），这是在重置之后。 - Martin-