Grassetto e Corsivo non funzionano in Firefox o Chrome

Question

I grassetti <b></b> e Italics <i></i> vengono visualizzati correttamente su iPhone e Internet Explorer, ma non c'è formattazione in Firefox o Chrome.

Ecco i file .css. Ho anche provato ad aggiungere in i { font-style:italic; } separatamente in Reset e Stile.

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

Ecco il codice HTML, ho provato ad utilizzare <strong>asdf</strong> per vedere se sarebbe rendere il testo in grassetto, ma non è così.

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

Perché il testo in grassetto hanno lo stesso aspetto come testo normale?

Answer 1

Il font: inherit nel blocco di ripristino principale (il primo sotto l'intestazione di ripristino) sta causando il ripristino di tutti i tipi di carattere sulla pagina. Infatti, not even fixing the invalid html to be valid fixes this, il tuo css in mente.

Commentando questa proprietà fixes your text.

Answer 2

oggi sostituiscono in questo codice

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

in questo

<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

Answer 3

È perché il codice HTML non è valido.

Stai chiudendo la </strong> prima della </i>

Dovrebbe essere

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

Answer 4

Credo che il suo errore tag di chiusura, in HTML

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

questo dovrebbe essere come questo

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

Il tag aperto deve essere chiuso con lo stesso tag per evitare errori.

Answer 5

Gli elementi HTML sono nella struttura ad albero. I tuoi elementi non sono chiusi così come erano aperti. per esempio-

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

Answer 6

Firefox ha problemi con alcuni tag come <b>, <strong> e <i> tag per qualche ragione. È un bug nel browser firefox stesso. Prova una versione diversa di Firefox e le cose saranno diverse.

Ecco la soluzione che funziona per tutti, Aggiungi questo al vostro file CSS:

strong, b { 
    font-weight: bold; 
} 

Si tratta di una sostituzione CSS.Ora firefox rende il testo in grassetto come questo invece di come questo.