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!
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ẹ, [...]
Aug
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 [...]
Aug
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 [...]
Aug
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 [...]
Jul
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 [...]
Jul
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 [...]
Jul