Chữ đậm và chữ nghiêng không hoạt động trên Firefox hoặc Chrome

Question

Bold <b></b> và in nghiêng <i></i> thẻ hiển thị chính xác trên iPhone và Internet Explorer, nhưng không có định dạng trong Firefox hoặc Chrome.

Dưới đây là các tệp .css. Tôi cũng đã cố gắng thêm i { font-style:italic; } riêng trong Đặt lại và Kiểu.

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

Dưới đây là HTML, tôi đã cố gắng sử dụng <strong>asdf</strong> để xem nếu nó sẽ làm cho chữ đậm nhưng nó không.

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

Tại sao văn bản in đậm trông giống văn bản thông thường?

Answer 1

font: inherit trong khối đặt lại chính của bạn (khối đầu tiên bên dưới tiêu đề đặt lại) đang khiến tất cả phông chữ của bạn trên trang được đặt lại. Thật vậy, not even fixing the invalid html to be valid fixes this, css của bạn trong tâm trí.

Nhận xét thuộc tính này fixes your text.

Answer 2

Bây giờ thay vào mã này

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

vào này

<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

Đó là bởi vì HTML của bạn bị thay đổi.

Bạn đang đóng </strong> trước </i>

Nên

<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

Tôi nghĩ TAG sai lầm đóng cửa của nó, trong HTML

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

này nên như thế này

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

Thẻ mở phải được đóng bằng cùng một thẻ để tránh lỗi.

Answer 5

Các phần tử HTML nằm trong cấu trúc cây. Các yếu tố của bạn không đóng khi chúng được mở. cho example-

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

Answer 6

Firefox có rắc rối với thẻ nhất định như <b>, <strong> và <i> thẻ đối với một số lý do. Đó là một lỗi trong trình duyệt firefox. Hãy thử một phiên bản khác của firefox và mọi thứ sẽ khác nhau.

Dưới đây là cách khắc phục làm việc cho tất cả mọi người, Thêm phần này vào file CSS của bạn:

strong, b { 
    font-weight: bold; 
} 

Đó là một ghi đè CSS.Giờ đây, firefox hiển thị văn bản in đậm như thế này thay vì như thế này.