Hướng dẫn fix lỗi tất cả các trình duyệt dễ dàng bằng css

Là một người làm web chắc hẳn ai cũng đau đầu việc layout web chạy tốt trên tình duyệt này nhưng sang trình duyệt khác thì bị vỡ rất xấu. Vậy phải làm sao? Sau đây là cách đơn giản để fix mọi trình duyệt bằng  css, sau khi đọc bài hướng dẫn này chắc các bạn không phải lo về việc này nữa :))


1. Fix trình duyệt Internet Explorer
Cách 1:
Viết css cho từng ie, đặt trong thẻ <head> kiểm tra phiên bản ie tương ứng:

•    Tất cả phiên bản ie

•    Chạy với các trình duyệt khác, trừ trình duyệt ie

•    Chỉ chạy trên ie6

•    Chỉ chạy trên ie7


Có thể kết hợp gt (greater than), gte (greater than or equal), lt (less than), lte (less than or equal)
VD: chỉ chạy trên các trình duyệt từ ie7 trở về sau


Cách 2:
Hack css theo từng phiên bản ie
•    Chỉ chạy trên ie6: thêm “* html ” trước khối css mà bạn định nghĩa
Ví dụ:

* html #div {
height: 500px;
}

•    Chỉ chạy trên ie7: thêm “*+html ” trước khối css mà bạn định nghĩa
Ví dụ:

*+html #div {
height: 500px;
}

•    Chỉ chạy trên ie8
Ví dụ:

#div {
height: 500px\0/;
}

•    Không cho chạy trên ie6 và các phiên bản ie về trước
Ví dụ:

html > body #div {
height: 500px;
}


Cách 3:

.className
{
padding:10px\0/; /* chỉ chạy trên IE9 + IE8 */
}
@media all and (min-width:0) {
.className { color:pink \0/; }  /* chỉ chạy trên IE9 */
}
.className{padding:10px\9;} /* chỉ chạy trên IE8 */
.className{padding:10px\0;} /* chỉ chạy trên IE8 */

.className{*padding :10px ;} /* chỉ chạy trên IE7 */
hoặc
* + html .class{margin-left:20px;} /* chỉ chạy trên IE7 */

.className{_padding :10px ;}  /* chỉ chạy trên IE6 */
hoặc
* html .logo{margin-left:10px;} /*chỉ chạy trên IE6 */




2. Fix trình duyệt Chrome

Cách  1: Sử dụng 1 file css riêng cho trình duyệt Chrome

<script type=”text/javascript”>
if(navigator.userAgent.toLowerCase().match(‘chrome’))
document.write(‘<link rel=”stylesheet” type=”text/css” href=”files/chrome.css”>’);
</script>


Cách 2 : Fix ngay trên file css chính

<style>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
div#search_form button
{
margin-left:-15px;
}
}
</style>



3. Fix trình duyệt Firefox

html>/**/body .className{margin-left:10px}


 Hoặc

@-moz-document url-prefix() {
.className {font-size: .6em;}}

 

4. Fix trình duyệt Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }


5. Fix trình duyệt Opera

@media all and (min-width:0px) {head~body .className {margin-left:10px;}}
/* version 9 và các version trước đó /*

Chúc các bạn thành công!

Nguyễn Tấn Tài

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.

Bài viết liên quan

Tạo nút liên hệ đẹp nhẹ không dùng JS cho WordPress

share code tạo nút liên hệ ở góc màn hình đẹp đơn giản gọn nhẹ, [...]

Bảo mật website hướng dẫn cách bảo vệ trang web hiệu quả

Để giúp website hoạt động hiệu quả và tránh được những rủi ro như mất [...]

Download theme Sahifa wordpress sạch 100% từ themeforest

Download theme Sahifa wordpress dành cho website tin tức, tạp chí sạch 100% từ themeforest [...]

Theme Flatsome – Theme Bán Hàng số #1 hiện nay

Theme Flatsome là theme bán hàng tốt nhất hiện nay Nhiều mẫu web được thiết [...]

Elementor Pro thiết kế web kéo thả siêu nhanh

Bạn đang sử dụng website wordpress nhưng không giỏi về code, bạn muốn tạo ra [...]

Ithemes Security plugin bảo mật website wordpress tốt nhất

Việc bảo mật website là rất cần thiết vì không ai muốn website của mình bị hacker [...]

Trả lời