Ở đâu và làm thế nào để tôi gọi CSS khác nhau cho các trình duyệt khác nhau trong trang web MVC của tôi?

Tôi đang phát triển một trang web và đã nhận thấy rằng trang web đó không hoạt động chính xác trên tất cả các trình duyệt.Ở đâu và làm thế nào để tôi gọi CSS khác nhau cho các trình duyệt khác nhau trong trang web MVC của tôi?

Tôi muốn tạo một biểu định kiểu CSS khác nhau cho từng trình duyệt, chủ yếu là IE.

Sự cố của tôi xuất hiện trong cách gọi các kiểu trang khác nhau với các trình duyệt khác nhau.

Tôi cũng không thể tìm thấy trang web chính được gọi trong trang web MVC của tôi ở đâu, nếu ai đó có thể cho tôi biết site.css được gọi trong trang web MVC sẽ tuyệt vời ở đâu.

Vậy tôi làm cách nào để gọi các mẫu kiểu khác nhau cho các trình duyệt khác nhau trong trang web MVC?

Nguồn

2012-11-26 Pomster

Sử dụng biểu định kiểu trình duyệt cụ thể không khác nhau trong ASP .NET MVC. Bạn đặt câu lệnh if và trỏ tới biểu định kiểu. See more here. Bạn có thể đặt bảng kê kiểu dáng của mình trong tệp _Layout.cshtml trong thư mục Views\Shared

Trong ASP .NET MVC, biểu định kiểu nằm trong thư mục Content.

ASP .NET MVC 4 uses Minification and Bundling. Nhìn vào bên trong thư mục App_Start, bạn sẽ thấy một tệp BundleConfig.cs và bên trong, bạn sẽ thấy bundles chứa css và javascript. Trong tệp _layout.cshtl, bạn sẽ thấy mã tham chiếu các số bundles này, chẳng hạn như @Styles.Render("~/Content/css").

"Vì vậy, ở đâu và làm thế nào để tôi gọi các tờ định kiểu khác nhau cho các trình duyệt khác nhau trong trang web MVC?"

Trong Bố cục tệp có các thẻ <head> của bạn. như thế này:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" /> 
     @Styles.Render("~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 
     <!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="iespecific.css" /> 
     <![endif]--> 

    </head> 
    ....

Nguồn

2012-11-26 12:03:01 robasta

Xin cảm ơn, bạn có biết cách làm tương tự cho FireFox không? – Pomster

không may, các nhận xét có điều kiện ('if IE') chỉ hoạt động đối với IE. cho Firefox, bạn có thể sử dụng mã phía máy chủ để thực hiện kiểm tra '@if (Request.UserAgent.ToLower(). Chứa (" firefox ")) {thêm liên kết tới ff css}'. Hoặc, bạn có thể sử dụng hacks 'moz' css (xem tại đây: http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/) – robasta

Sử dụng điều kiện:

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

hoặc

<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

hoặc

<!--[if gte IE 6]> (greater then IE6) 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

tôi không có đầu mối nơi css của bạn sẽ được nằm trong "trang web MVC", kể từ khi tôi có không có đầu mối gì bạn đang sử dụng.

Nguồn

2012-11-26 12:00:36

Và làm thế nào để tôi xác định chrome và firefox? – Pomster

Vâng, nếu bạn cần javascript mã cho mỗi trình duyệt cụ thể, bạn chắc chắn đang làm điều gì đó sai với css của bạn. Nhưng không, không có câu lệnh css có điều kiện cho các trình duyệt khác, sau đó là IE. Tuy nhiên, bạn có thể sử dụng '[if! IE]' cho tất cả các trình duyệt không phải của IE. –

Bạn có thể thử này cho IE:

<!--[if IE]> 
According to the conditional comment this is IE<br /> 
<![endif]--> 
<!--[if IE 6]> 
According to the conditional comment this is IE 6<br /> 
<![endif]--> 
<!--[if IE 7]> 
According to the conditional comment this is IE 7<br /> 
<![endif]--> 
<!--[if IE 8]> 
According to the conditional comment this is IE 8<br /> 
<![endif]--> 
<!--[if IE 9]> 
According to the conditional comment this is IE 9<br /> 
<![endif]--> 
<!--[if gte IE 8]> 
According to the conditional comment this is IE 8 or higher<br /> 
<![endif]--> 
<!--[if lt IE 9]> 
According to the conditional comment this is IE lower than 9<br /> 
<![endif]--> 
<!--[if lte IE 7]> 
According to the conditional comment this is IE lower or equal to 7<br /> 
<![endif]--> 
<!--[if gt IE 6]> 
According to the conditional comment this is IE greater than 6<br /> 
<![endif]--> 
<!--[if !IE]> --> 
According to the conditional comment this is not IE<br /> 
<!-- <![endif]-->

Lưu ý cú pháp đặc biệt:

gt: greater than 
lte: less than or equal to

Nguồn

2012-11-26 12:05:21 Fred

cách tiếp cận của bạn là thực sự không thực hành tốt nhất. Bạn không nên nhắm mục tiêu các trình duyệt cụ thể , thay vào đó bạn nên nhắm mục tiêu các tiêu chuẩn (ví dụ: HTML5 & CSS3).

Nếu bạn tin rằng đối tượng mục tiêu của bạn có khả năng sử dụng các trình duyệt cũ hơn, sau đó nhắm mục tiêu HTML4 và CSS2.

Ngoài ra ... hãy cân nhắc sử dụng tính năng bình thường hóa CSS, trái với việc có các bảng định kiểu khác nhau cho các trình duyệt khác nhau.

Từ trải nghiệm cá nhân (và thực sự chuyên nghiệp), tôi đã thấy rằng khi sử dụng CSS bình thường, nếu tôi thậm chí phải viết một biểu định kiểu trình duyệt cụ thể, thì bảng định kiểu toàn cục của tôi sẽ được triển khai kém ... đầu CSS bình thường hoạt động trên toàn cầu, hơn là viết hacks cho trình duyệt!

Google:HTML5 Boilerplate | CSS Normalization

Bạn có thể muốn thử ở đây ... http://html5boilerplate.com/

Một chút về nghiên cứu bạn có thể muốn là Google Chrome Frame

Nguồn

2012-11-26 12:26:42 series0ne

Cảm ơn tôi sẽ xem xét điều này, Làm thế nào có thể tôi cho biết trình duyệt sử dụng tiêu chuẩn nào? – Pomster

Xin chào! Khung Google Chrome đó thật tuyệt vời, tôi hơi khó chịu khi tải xuống và cài đặt một cái gì đó trước khi sử dụng trang web của tôi. – Pomster

@Pommy, bạn cũng có thể kiểm tra trình duyệt của mình để xem những gì nó hỗ trợ bằng cách sử dụng ... http: //html5test.com/ – series0ne

Ở đâu và làm thế nào để tôi gọi CSS khác nhau cho các trình duyệt khác nhau trong trang web MVC của tôi?

Trả lời

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