Fettdruck und Kursivdruck funktionieren nicht in Firefox oder Chrome

Question

Fett <b></b> und Italics <i></i> Tags werden auf dem iPhone und Internet Explorer korrekt dargestellt, aber es gibt keine Formatierung in Firefox oder Chrome.

Hier sind die CSS-Dateien. Ich habe auch versucht, in i { font-style:italic; } getrennt in Reset und Style hinzuzufügen.

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

Hier ist der HTML ist, habe ich versucht, <strong>asdf</strong> zu sehen, ob es sich um Text fett machen würde, aber es funktioniert nicht.

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

Warum hat der fett gedruckten Text genauso wie normaler Text aussehen?

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

in diesem

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

Answer 1

Die font: inherit in Ihrem Haupt-Reset-Block (der erste unter dem Reset-Header) verursacht, dass alle Ihre Schriften auf der Seite zurückgesetzt werden. In der Tat, not even fixing the invalid html to be valid fixes this, Ihre CSS im Sinn.

Kommentieren Sie diese Eigenschaft fixes your text.

Answer 2

nun in diesen Code ersetzen LIve Demo

Answer 3

Es ist, weil Sie Ihre HTML ungültig ist.

Sie schließen die </strong> vor dem </i>

Sollte

<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

Ich denke, die TAG Schließen Fehler im HTML-

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

diese wie folgt

sein sollte

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

Das offene Tag muss mit demselben Tag geschlossen sein, um Fehler zu vermeiden.

Answer 5

Die HTML-Elemente sind in Baumstruktur. Ihre Elemente sind nicht geschlossen, da sie offen waren. für Beispiel-

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

Answer 6

Firefox hat Probleme mit bestimmten Tags wie <b>, <strong> und <i> Tags aus irgendeinem Grund. Es ist ein Fehler im Browser Firefox selbst. Versuchen Sie eine andere Version von Firefox und die Dinge werden anders sein.

Hier ist die Abhilfe ist, die für alle funktioniert, fügen Sie diese Datei auf Ihrem CSS:

strong, b { 
    font-weight: bold; 
} 

Es ist eine CSS außer Kraft setzen.Jetzt macht Firefox Fettschrift wie diese statt wie folgt.