Полужирный и курсив не работают в Firefox или Chrome

Question

Полужирный <b></b> и курсивом <i></i> теги отображаются правильно на iPhone и в Internet Explorer, но форматирования в Firefox или Chrome нет.

Вот .css-файлы. Я также попытался добавить в i { font-style:italic; } отдельно в Reset and 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;  
} 

Вот 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> 

Почему Жирный выглядеть так же, как обычный текст?

Answer 1

font: inherit в вашем основном блоке сброса (первый под заголовком сброса) вызывает сброс всех ваших шрифтов на странице. Действительно, not even fixing the invalid html to be valid fixes this, ваш css в виду.

Комментарий: fixes your text.

Answer 2

Теперь замените в этом коде

<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

Answer 3

Это потому, что ваш HTML имеет неверный формат.

Вы закрывание </strong> до </i>

Должно быть

<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

Я думаю, что его TAG закрывающей ошибки в HTML

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

это должно быть, как это

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

Открытый тег должен быть закрыт в том же теге, чтобы избежать ошибок.

Answer 5

Элементы HTML находятся в древовидной структуре. Ваши элементы не закрыты, поскольку они были открыты. для ПРИМЕР-

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

Answer 6

Firefox имеет проблемы с определенными тегами, как <b>, <strong> и <i> теги для какой-то причине. Это ошибка в самом браузере firefox. Попробуйте использовать другую версию firefox, и все будет по-другому.

Вот обходной путь, который работает для всех, Добавьте это в ваш файл CSS:

strong, b { 
    font-weight: bold; 
} 

Это CSS переопределение.Теперь firefox делает полужирным шрифтом вот так вместо этого.