粗体和斜体不适用于Firefox或Chrome

粗体和斜体标记在iPhone和Internet Explorer上正确呈现，但Firefox或Chrome中没有格式。粗体和斜体不适用于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，我尝试使用asdf，看它是否会加粗文字，但它没有。

<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>

为什么大胆的文字看起来同普通的文本？

来源

2013-03-19 userrandomnums

您的主重置块（重置标题下的第一个块）中的font: inherit正在导致页面上的所有字体被重置。确实，not even fixing the invalid html to be valid fixes this，你的CSS在脑海中。

评论此房产fixes your text。

来源

2013-03-19 04:33:02 Daedalus

有一个右括号，在发帖时意外错过了。我删除了字体：继承部分，但不幸的是，即使修复了强大的HTML问题，它仍然是一样的。 – userrandomnums 2013-03-19 05:12:14

@userrandomnums如果您的网站在线..你能链接到它吗？这将使调试更容易，因为它应该像上一个演示中所示的那样工作。 – Daedalus 2013-03-19 05:18:43

嘿，我认为它确实有效。我的朋友说她看到格式化，所以我猜它一定是我的缓存。谢谢你的帮助！ – userrandomnums 2013-03-19 05:29:19

现在更换成这个代码

<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>

LIve Demo

来源

2013-03-19 04:17:58

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

您要关闭前

应该

<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>

来源

2013-03-19 04:19:15

我认为它的标签关闭错误，在HTML

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

这应该是这样的

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

开放式标签必须在同一个标签内关闭才能避免错误。

来源

2013-03-19 04:20:09 MarmiK

HTML元素是树状结构。您的元素在打开时未关闭。的示例 -

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

来源

2013-08-14 10:15:59 FraZer

Firefox已经与像，和标签由于某种原因，某些标签的麻烦。这是Firefox浏览器本身的错误。尝试不同版本的Firefox，事情会有所不同。

这里是适合所有人的解决方法，添加到您的CSS文件：

strong, b { 
    font-weight: bold; 
}

这是一个CSS覆盖。现在firefox呈现粗体文字像这样而不是这样。

来源

2013-11-28 07:43:46

粗体和斜体不适用于Firefox或Chrome

回答

相关问题