2013-09-30 31 views
8

Tôi biết rằng có nhiều vấn đề khác tương tự như vậy, nhưng tôi dường như không đáp ứng bất kỳ tiêu chí nào của các vấn đề khác.Các vấn đề liên quan đến vấn đề Firefox

My Bootstrap 3 glyphicons đang hoạt động cho mọi trình duyệt ngoại trừ Firefox. Trên Firefox, chúng hiển thị dưới dạng biểu tượng lạ. Cùng một vấn đề này là khét tiếng khi phục vụ các glyphicons từ một CDN, nhưng đó không phải là vấn đề của tôi khi tôi đang sử dụng các tệp phông chữ được lưu trữ cục bộ. Ngoài ra, tôi đã đảm bảo rằng các tệp của tôi không bị hỏng.

Đây là mã của tôi.

<head> 
    <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap-style.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="/assets/css/style.css" /> 
</head> 

Mã cho glyphicon:

<span class="glyphicon glyphicon-list-alt section-icon"></span> 

Tôi đã đảm bảo rằng tác phẩm của tôi được giải quyết một cách thích hợp và làm cho chắc chắn để xóa bộ nhớ cache của tôi. Tôi không thể nói những gì tôi đang thiếu ở đây. Gợi ý?

Trả lời

8

Tôi có vấn đề này, nhưng phục vụ css bootstrap từ CDN giải quyết nó cho tôi:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
+0

YESSS.Điều đó giải quyết vấn đề của tôi! – thangcao

15

Firefox có cài đặt nghiêm ngặt (this) ngăn tệp HTML của bạn truy cập phông chữ trên web của bạn từ các thư mục không nằm trong thư mục gốc. Điều này chỉ xảy ra khi bạn làm việc cục bộ chứ không phải từ các tệp trên máy chủ. Bạn phải thay đổi một thiết lập trong Firefox để hiển thị glyphicons khi bạn phát triển cục bộ.

-Mở "about: config" trong địa chỉ của bạn trong firefox

-Sau đó tìm kiếm cho "security.fileuri.strict_origin_policy" tài sản và thay đổi nó từ "true" thành "false". (bỏ qua các dấu ngoặc kép của khóa học)

+2

Tôi deving trên máy chủ với các phông chữ trên cùng một máy chủ. –

+1

Cùng một vấn đề ở đây. Bạn có giải pháp nào cho nó không? –

+2

từ góc nhìn của nhà phát triển, bạn không thể dựa vào người dùng tìm ra điều này. Giải pháp phải thụ động, không hoạt động trên đầu của người dùng. – ahnbizcad

3

Mất một thời gian để giải quyết vấn đề này và vấn đề của tôi có thể khác với những người khác vì có những câu trả lời phổ biến mà không hiệu quả với tôi. Đó là bởi vì vấn đề và giải pháp của tôi phải làm với Amazon S3. Vì vậy, nếu bạn đang sử dụng S3, hãy đọc tiếp.

Sự cố là cấu hình CORS (Chia sẻ tài nguyên gốc). Dưới đây là cách giải quyết:

Đăng nhập vào S3 của bạn và mở thùng mà bạn gặp sự cố. Nhấp vào 'Thuộc tính' và sau đó nhấp vào 'Quyền'. Trong trình đơn thả xuống, hãy nhấp vào 'chỉnh sửa cấu hình CORS'. Một cửa sổ sẽ bật lên với mã trong một hộp trông như thế này:

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Xóa dòng này:

<AllowedHeader>Authorization</AllowedHeader> 

Lưu nó và làm mới trang Firefox của bạn. Các biểu tượng của bạn bây giờ sẽ xuất hiện!

Hãy xem các liên kết này để biết thêm thông tin khi chúng giúp tôi giải quyết vấn đề này: hereherehere. Nếu bất cứ ai có thể cung cấp cái nhìn sâu sắc hơn về lý do tại sao điều này hoạt động, xin vui lòng làm!

+0

Tôi không sử dụng S3, vì vậy điều này chắc chắn không phải là vấn đề với cấu hình của tôi. Cảm ơn mặc dù! –

Các vấn đề liên quan