Thông tin tài liệu
Cơ bản về tính toán box model trong css !!! Nếu bạn nào đã tìm hiểu về css lâu , hoặc là thiết kế web lâu rùi thì chắc cái này biết rùi ^^, mình đây chỉ là đọc và thấy cái này rất cần thiết cho người mới làm quen với nó lên viết thui ^^(nhớ lại lúc mới vọc css cánh đây 1 tháng cứ không hiểu tại sao mình lại làm chạy được trên firefox chuẩn thì sang ie nó lại tùm lum): Ở đây như trong hình , nếu mà theo chuẩn w3c thì tổng chiều rộng sẽ là : total width = margin-left + border-left + padding-left + width + padding-right + border- right + margin-right quên mất là các bạn phải nhớ nhé , cái width mà ta khai báo trong css ý ở w3c thì nó chỉ là chiều rộng của phần nội dung thui , tức là cái width trong công thức kia. -Còn đối với bác ie nhà ta : total width = margin-left + width + margin-right Có nghĩa là bác ý thích chơi một mình một kiểu không giống ai , cái chiều rộng ra khai báo trong css thì sẽ là tổng cộng của cả border và padding Cái này là rất quan trọng trong việc nếu ta thiết kế css theo kiểu chính xác đến từng pixel Ví dụ : #news { padding:10px; border:1px solid; width:250px; } Giờ bạn lấy cái thước mét ra đo xem thì sẽ thấy bác firefox hay opera đều hiển thị đúng còn ie thì không ^^ -Cánh khắc phục: +Tránh hoàn cảnh là nguyên nhân của vấn đề : VD có đoạn code sau cần làm: <div id="news"> <h2>News</h2> <ul> <li> <h3>News article 1</h3> <p>Lorem ipsum dolor sit amet</p> </li> <li> <h3>News article 2</h3> <p>Lorem ipsum dolor sit amet</p> </li> </ul> </div> Nếu với các trình duyệt chuẩn như firefox và opera thì để có được tổng chiều rộng là 250px cho #news thì ta dùng code sau : #news { padding:10px; border:1px solid; width:228px; } nhưng sẽ gặp vấn đề với ie thay vì dùng như vậy ta chèn thêm một thẻ div bao bọc xung quanh #new ví dụ ban đầu với tên là #sidebar như sau: <div id="sidebar"> <div id="news"> </div> </div> Và code sẽ như sau để chạy được tuốt trên các trình duyệt : #sidebar {width:250px} #news { padding:10px; border:1px solid; } Ở đây ta cho #sidebar có chiều rộng của phần nội dung là 250px , tránh đến việc đề cập trong thẻ #new là 228px để có được cùng một chiều rộng tương tự(nhưng nếu đề cập là 228 thì trên bác ie sẽ sạc T_T) +Dùng hack với firefox tránh cho ie5/win: #news { padding:10px; border:1px solid; width:250px; w\idth:228px; } khi gặp dòng w\idth:228px; thì ie5 sẽ không hiểu nhưng firefox thì hiểu và sẽ hiển thị chiều rộng của nội dung là 228px +Sử dụng bình luận có điều kiện cho ie6: <! [if lt IE 6]> <style type="text/css"> #news {width:250px} </style> <![endif] > Thì chỉ bác ie6 nhà ta hiểu được Mong chia sẻ được chút kiến thức với mọi người !important Khi code CSS gặp vấn đề ở độ rộng (width), chiều cao (height), nên thêm !important vào phía sau. Ví dụ : #vidu{ width:10px !important; (FF, IE7 nhận cái giá trị width này) width:10px; (IE6 nhận giá trị width này) } #vidu{ #width:772px; /*only IE7 know*/ _width:800px; /*only IE6 know*/ } Opacity / Transparency trên IE/FF Code: <img src="path_to_image.jpg" width="150" height="113" alt="klematis" style="-moz-opacity:0.4;filter:alpha(opacity=40) /> Trong đó: -moz-opacity:0.4 thực thi trên FF filter:alpha(opacity=40) trên IE Chú ý: Trên IE filter:alpha(opacity=x), x có giá trị 0-100 và x càng nhỏ thì độ transparent càng cao Trên FF (-moz-opacity:x), x có giá trị 0.0 - 1.0, x càng nhỏ thì độ transparent càng cao Khắc phục lỗi double margin trong css với ie Trước hết xin đưa một ví dụ về double margin trong css , <style type="text/css"> #float{ border:5px solid #FF0000; float:left; margin-left:100px; } </style> <div id="float"><h3>Tôi là tôi</h3></div> Bạn paste đoạn code này vô <body></body> và xem trên 2 trình duyệt là firefox và internet exploder thì bạn sẽ thấy sự khác biệt rất rõ ràng giữa chúng là ie thì margin-left đến tận 200px còn trong khi đó thì firefox chuẩn. -Nguyên nhân: là do ie có tiền sử với sự không tương thích css và đến cả ie7 cũng đã khắc phục nhiều điểm không tương thích với css của phiên bản trước là ie6 thì lại tòi ra hàng chục lỗi mới về không tương thích , nhưng may là nó đỡ hơn bác ie6 -Tác nhân gây ra hiện tượng: Hiện tượng này chỉ xảy ra khi ta đã float về một phía nào đó nhưng lại tiếp tục margin căn lề về phía đó tiếp -Cánh khắc phục : rất đơn giản là chỉ việc chèn thêm dòng code display:inline; vô đoạn style trên để cho bác ie nhà ta hiểu đúng thui <style type="text/css"> #float{ border:5px solid #FF0000; float:left; margin-left:100px; display:inline; } </style> <div id="float"><h3>Tôi là tôi</h3></div> 7 thủ thuật CSS thường dùng đối với các lỗi "cố ý" của IE Ngày đăng: 2007-12-21Nguồn tin: Thông tin công nghệ Internet Explorer là trình duyệt web phổ biến nhất do nó được tích hợp chặt chẽ với Windows, lợi thế đó cho thấy sự ích kỉ và sinh ra sự áp đặt đối với người dùng, đặc biệt là các nhà phát triển. Có những đoạn mã đúng chuẩn XHTML có thể chạy tốt trên tất cả các trình duyệt đạt chuẩn hiển thị XHTML nhưng chưa hẳn nó sẽ hiển đúng trên IE thậm chí IE còn không thèm trả lại kết quả. Dưới đây là 7 thủ thuật CSS thường dùng đối với các lỗi độc quyền của ngài IE trong quá trình thiết kế một trang Web. 1. Lỗi hiển thị khối Sửa lỗi hiển thị cho các phiên bản IE6 về trước khi viền và khoảng cách với nội dung bao gồm cả chiều rộng của đối tượng. padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em; 2. Ghi chú điều kiện Những ghi chú này đơn giản là những ghi chú chỉ hiển thị đối với những phiên bản trình duyệt nhất định do từng phiên bản có những lỗi khác nhau. <! [if IE]>Mã CSS<![endif] > Đoạn mã trên sẽ hiển thị mã CSS tương ứng trên tất cả các phiên bản trình duyệt IE, nếu bạn chỉ muốn nó được trình duyệt IE v5.01, v5.5 và v6 đọc được thì có thể dùng đoạn mã sau: <! [if lte IE 6]>Mã CSS<![endif] > Sau khi thử nghiệm chúng ta nên loai bỏ các đoạn mã đặc biệt trên để giảm nhẹ file CSS cũng như giảm tải cho các trình duyệt khác, để áp dụng các mã CSS đặc biệt trên cho IE thì chỉ cần thêm đoạn mã sau vào phần header là đạt yêu cầu được nạp trong IE: <! [if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie_hacks.css"></link> <![endif] > Một vài kiểu mã điều kiện: • IE - Bất kỳ phiên bản nào • lt IE version - Phiên bản trước version • lte IE version - Phiên bản trước hoặc bằng với version • IE version - Chỉ với phiên bản version • gte IE version - Phiên bản từ version • gt IE version - Phiên bản mới hơn version. 3. Min-width và Max-width - Độ rộng lớn tối đa và tối thiểu của một đối tượng Tất cả các phiên bản của IE đều không hiểu đoạn mã này có ý nghĩa gì, chính vì vậy chúng ta phải tạo một cách khác để nó có thể biết ta đang muốn gì dựa trên ví dụ về việc tạo một lớp có id="wrapper": Kế tiếp với đoạn mã tạo một lớp có độ rộng tối thiểu 750px: #wrapper{ min-width: 750px; width:expression(document.body.clientWidth < 750? "750px": "auto" ); } Đoạn mã sau có độ rộng tối thiểu 750px và tối đa 1220px: #wrapper{ min-width: 750px; max-width: 1220px; width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto"); } Một cách khác không dùng đến JS trong CSS: selector { min-height:500px; height:auto !important; height:500px; } Đoạn mã này cho kết quả như nhau trên các trình duyệt IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2; có lẽ là tối ưu nhất chăng ? 4. Chọn đối tượng Tùy từng phiên bản khác nhau của IE mà lỗi chọn đối tượng được sửa theo những cách khác nhau như sau: - IE 6 trở về trước *html {} - IE 7 trở về trước *:first-child+html {} * html {} - IE 7 *:first-child+html {} - IE 7 và các trình duyệt mới khác html>body {} - Các trình duyệt mới khác trừ IE 7 html>/**/body {} - Các phiên bản Opera v9 trở về trước html:first-child {} 5. Hiệu ứng hover: Mã :hover cho phép bạn tạo ra những hiệu ứng đặc biệt đối với các đối tượng được liệt kê dưới dạng bảng như danh sách bài viết trên diễn đàn Phần lớn các trình duyệt hiểu và hiển thị tốt hiệu ứng này ngoại trừ IE :-L. Đây là một vấn đề phức tạp, bạn có thể xem bài viết này để biết cách xử lý vấn đề của IE 6. Hiệu ứng trong suốt của định dạng ảnh PNG IE không hỗ trợ hiệu ứng trong suốt của định dạng ảnh PNG đơn giản bời vì định dạng PNG không phải do Microsoft hỗ trợ hay do họ tạo ra ;)) Điều đó không có nghĩa là chúng ta phải chấp nhận và chuyển qua dùng định dạng GIF có độ phân giải thấp hơn nhiều Sử dụng một đoạn mã HTC và một file .gif trong suốt để xử lý lỗi này, có thể tải ở đây.Thêm đoạn mã sau vào file ie.css: img.pngfix { behavior: url(pngHack.htc); } Komodomedia có một giải pháp khác cũng cho kết quả tương tự. 7. Phát hiện trình duyệt để sử dụng CSS tương ứng Bằng cách sử dụng PHP để phát hiện trình duyệt dựa trên dịnh danh browser agent chúng ta có thể biết được trình duyệt nào đang tải website và đưa ra mã CSS tương ứng. Stylegala có đưa ra một phương án cho cách làm này. Bài viết dựa trên bài Top 7 CSS hacks that we often use to solve common IE Problems. . Cơ bản về tính toán box model trong css !!! Nếu bạn nào đã tìm hiểu về css lâu , hoặc là thiết kế web lâu rùi thì chắc cái này biết. transparent càng cao Khắc phục lỗi double margin trong css với ie Trước hết xin đưa một ví dụ về double margin trong css , <style type="text /css& quot;> #float{ border:5px solid #FF0000; float:left; margin-left:100px; } </style> <div. những phiên bản trình duyệt nhất định do từng phiên bản có những lỗi khác nhau. <! [if IE]>Mã CSS& lt;![endif] > Đoạn mã trên sẽ hiển thị mã CSS tương ứng trên tất cả các phiên bản trình
Ngày đăng: 12/07/2014, 19:20
Xem thêm: Cơ bản về tính toán box model trong css pdf, Cơ bản về tính toán box model trong css pdf
