在Firefox或Chrome中加粗和斜体不起作用

Question

加粗标签<b></b>和斜体标签<i></i>在iPhone和Internet Explorer上能够正确显示，但是在Firefox或Chrome中没有格式。

以下是.css文件。我也尝试将i { font-style:italic; }分别添加到重置和样式中。

Color.css:

body {
    color: #fff;
    background-image: url(../img/background-red.png);
}

Reset.css:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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,
input, textarea, button
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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul, dl {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


Style.css:

html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;  

    font: normal 18px/1.4 'Open Sans', Arial, Helvetica, sans-serif;

    background-position: left top;
    background-repeat: no-repeat;
}

.panel {
    position: absolute;
    z-index: 0;
    background: #fff;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -moz-box-shadow: 0 0 10px #fff;
    -webkit-box-shadow: 0 0 10px #fff;
    box-shadow: 0 0 10px #fff;
}


.content {
    max-width: 45%;
    margin: 100px;

    float: left;

    position: relative;
    z-index: 1;    
}

h1 {
    font-size: 72px;
    line-height: 56px;
    font-weight: 300;    
}

h2 {
    margin: 15px 0 50px;    

    font-size: 30px;
    line-height: 30px;    
    font-weight: 300;    
}

这是HTML代码，我尝试使用<strong>asdf</strong>来加粗文本，但没有效果。

<div class="content">
    <h1>adssda</h1>
    <h2>dasdasdsa</h2>

<p><i><strong>sadsad</strong>asdsad</i></p><br>
sadasddsa<br><br>
<strong>asdasd</strong><br><br>
    <p><strong>asdasd</strong></p><br>
</div>

为什么加粗的文字看起来和普通文本一样？

- userrandomnums

Answer 1

火狐浏览器在处理某些标签（如<b>、<strong>和<i>）时会出现问题，这是火狐浏览器本身的一个bug。尝试使用不同版本的火狐浏览器可能会有所不同。

以下是适用于所有人的解决方法，请将其添加到您的CSS文件中：

strong, b {
    font-weight: bold;
}

这是一种CSS覆盖。现在Firefox会像这样呈现加粗文本而不是像这样。

- Eric Leschinski

Answer 2

在您的主重置块中(下的第一个)，font: inherit导致页面上所有字体被重置。事实上，即使将无效的HTML修复为有效的链接1，这也不会解决您的CSS问题。

注释掉此属性可解决您的文本问题。

- Daedalus

---

在发布时漏掉了一个闭合括号。我删除了“font: inherit”部分，但不幸的是，在修复强HTML问题后仍然没有改变。 - userrandomnums

@userrandomnums 如果你的网站已经上线了，能否提供链接呢？这样会更容易调试，因为它应该像最后一个演示那样工作。 - Daedalus

嘿，我觉得它实际上正在工作。我的朋友说她看到了格式，所以我想这一定是我的缓存问题。感谢你的帮助！ - userrandomnums

@userrandomnums 欢迎；很高兴我能够帮助到你。 - Daedalus

Answer 3

HTML元素是以树形结构排列的。 你的元素没有被正确地关闭，而是一直处于打开状态。 例如-

<div>
<p>
<i>
<strong> sadsad
</strong>
</i>
</p>
</div>

- FraZer

Answer 4

现在将其替换为此代码

<p><strong><i>sadsad</strong>asdsad</i></p><br>
sadasddsa<br><br>
<strong>asdasd</strong><br><br>
    <p><strong>asdasd</strong></p><br>

转换成这样

<p><strong><i>sadsad</i></strong><i>asdsad</i></p><br>
sadasddsa<br><br>
<strong>asdasd</strong><br><br>
    <p><strong>asdasd</strong></p><br>

在线演示

- Rohit Azad Malik

Answer 5

这是因为你的HTML格式不正确。

你在</i>之前关闭了</strong>

应该是

<div class="content">
     <h1>adssda</h1>
     <h2>dasdasdsa</h2>
    <p><i><strong>sadsad</strong>asdsad</i></p>
    <br>
    sadasddsa
    <br>
    <br>
    <strong>asdasd</strong>
    <br>
    <br>
    <p><strong>asdasd</strong></p>
    <br>
</div>

- VVV

Answer 6

我认为这是HTML中的标签闭合错误。

<p><strong><i>sadsad</strong>asdsad</i></p><br>

应该是这样的

<p><i><strong>sadsad</strong>asdsad</i></p><br />

开放标签必须在同一标签内关闭，以避免错误。

- MarmiK