Pogrubienie i kursywa nie działają w przeglądarkach Firefox ani Chrome

Question

Znaczniki Bold <b></b> i Italics <i></i> są poprawnie renderowane na telefonach iPhone i Internet Explorer, ale nie ma formatowania w przeglądarce Firefox lub Chrome.

Oto pliki .css. Próbowałem też osobno dodać w i { font-style:italic; } w Reset i Style.

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

Oto HTML, próbowałem za pomocą <strong>asdf</strong>, aby zobaczyć, czy to zrobić tekst pogrubiony, ale tak nie jest.

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

Dlaczego tekst pogrubiony wyglądają tak samo jak zwykły tekst?

Answer 1

W głównym bloku resetowania (pierwszym pod nagłówkiem resetowania) powoduje resetowanie wszystkich czcionek na stronie. Rzeczywiście, not even fixing the invalid html to be valid fixes this, twój css na uwadze.

Komentując tę ​​nieruchomość fixes your text.

Answer 2

Teraz zastąpić w tym kodzie

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

w tym

<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

To dlatego, że HTML jest źle sformułowany.

Ty zamknięcie </strong> przed </i>

Powinny być

<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

myślę swój znacznik zamykający błąd w HTML

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

to powinno być tak

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

Otwarty znacznik musi być zamknięty w tym samym znaczniku, aby uniknąć błędów.

Answer 5

Elementy HTML znajdują się w strukturze drzewa. Twoje elementy nie są zamknięte, ponieważ były otwarte. dla Przykładzie

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

Answer 6

Firefox ma problemy z niektórymi znacznikami typu <b>, <strong> i <i> tagów dla jakiegoś powodu. To błąd w samej przeglądarce Firefox. Wypróbuj inną wersję firefox i wszystko będzie inne.

Oto obejście, który działa dla wszystkich, Dodaj to do pliku CSS:

strong, b { 
    font-weight: bold; 
} 

Jest to override CSS.Teraz firefox renderuje pogrubiony tekst podobny do tego zamiast tego.