Windows Việt

Cộng Đồng Công Nghệ Thông Tin Việt

Trang ChínhTrang Chính  Sự kiện  Tìm kiếmTìm kiếm  Đăng kýĐăng ký  Đăng NhậpĐăng Nhập  

Share
 
 Những lỗi thường gặp khi viết Css
Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
Administrator
Administrators

Administrator
 Administrators
Giới tính : Nam
Tuổi : 29
Posts Posts : 2804
Coins Coins : 5864
Thanked Thanked : 799
Những lỗi thường gặp khi viết Css Empty

Trước khi đọc bài các bạn nên cài firebug vào firefox , xem lại box model ( hình dưới ) , cài IETester vào nếu ko có IE Những lỗi thường gặp khi viết Css Boxmodel_0

1. IE Double Margin Float Bug

Những lỗi thường gặp khi viết Css Cb11_0

Bug này xảy ra khi ta đã cho 1 khối float:left rồi còn cộng thêm margin-left ( hoặc float:right cộng thêm margin-right ) Các web browser phiên bản mới trở lại đây sẽ chỉ tính giá trị margin thôi nhưng IE 5 , 5.5 , 6 sẽ tự nhân đôi khoảng cách giá trị margin VD :
Code:
 


[table][tr][td class=number]1[/td]
[td class=content]#content { float-left; margin-left:30px }[/td][/tr][/table]




thì IE 5,5.5,6 sẽ hiểu là margin-left:60px; Để fix bug này ta thêm display:inline vào bên trong thẻ đó :


Code:

[table][tr][td class=number]1[/td]
[td class=content]#content { float-left; margin-left:30px;display:inline;}[/td][/tr][/table]



2. Margin collapsing


Bug này chỉ xảy ra khi không có padding hoặc border
VD : Ta có nội dung như sau


Code:
 
[table][tr][td class=number]1[/td]
[td class=content]<DIV id=box> [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]<P>This paragraph has a 20px margin.</P> [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]</DIV>[/td][/tr][/table]



Css :
Code:
 


[table][tr][td class=number]1[/td]
[td class=content]#box { [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]margin: 10px; [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]background-color:#d5d5d5; [/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]} [/td][/tr][/table]

[table][tr][td class=number]5[/td]
[td class=content]p { [/td][/tr][/table]

[table][tr][td class=number]6[/td]
[td class=content]margin: 20px; [/td][/tr][/table]

[table][tr][td class=number]7[/td]
[td class=content]background-color:#6699FF; [/td][/tr][/table]

[table][tr][td class=number]8[/td]
[td class=content]}[/td][/tr][/table]




Kết quả sẽ cho ra như sau :Những lỗi thường gặp khi viết Css Margin-collap3

margin của #box không có tác dụng thì phải . Để được như mong muốn ta phải thêm padding:1px vào #box


Code:
 
[table][tr][td class=number]1[/td]
[td class=content]#box { [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]    padding:1px; [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]    margin: 10px; [/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]    background-color:#d5d5d5; [/td][/tr][/table]

[table][tr][td class=number]5[/td]
[td class=content]    }[/td][/tr][/table]



Kết quả :Những lỗi thường gặp khi viết Css Margin-collap2

3. Float-based layouts

Những lỗi thường gặp khi viết Css Clearing-floats-29dec08

Nhìn hình trên ta sẽ có đoạn html như sau :


Code:
 
[table][tr][td class=number]1[/td]
[td class=content]<DIV class=container> [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content] <DIV class=left></DIV> [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content] <DIV class=right></DIV> [/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]</DIV>[/td][/tr][/table]



Css :


Code:
 
[table][tr][td class=number]1[/td]
[td class=content].container {border:solid 1px red;}; [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content].left {float:left;height:100px;} [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content].right {float:right;height:200px;}[/td][/tr][/table]



Theo như suy nghĩ thì khối .container sẽ có chiều dài với khối .right . Tuy nhiên thì không phải vậy , nó sẽ ngắn hơn khối .right. Để fix bug này có nhiều cách , mình quen dùng clearfix ( cái này nói sau ). Cách cổ điển thì mình sẽ thêm clear:both cho khối dài nhất là .right
Code:



[table][tr][td class=number]1[/td]
[td class=content].right {float:right;height:200px;clear:both;}[/td][/tr][/table]



. Cách hiện đại hơn là thêm như thế này : thêm vào khối (.container) to bao bên ngoài dòng sau


Code:
 
[table][tr][td class=number]1[/td]
[td class=content].container { [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]overflow: auto; [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]width: 100%; [/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]}[/td][/tr][/table]



4. Min-height , max-height , min-width ,max-width

Những lỗi thường gặp khi viết Css Minheight

Đôi khi chúng ta cần đến những thuộc tính này , tuy nhiên IE6 trở xuống lại không hiểu được . Vd : Ta có 1 khối .box> Để fix bug này bạn xem 2 đoạn code sau
Đoạn dưới này chỉ fix min-height thôi muốn max thì cho max vào


Code:
 
[table][tr][td class=number]01[/td]
[td class=content]/* for understanding browsers */[/td][/tr][/table]

[table][tr][td class=number]02[/td]
[td class=content].box { [/td][/tr][/table]

[table][tr][td class=number]03[/td]
[td class=content]width:20em; [/td][/tr][/table]

[table][tr][td class=number]04[/td]
[td class=content]padding:0.5em; [/td][/tr][/table]

[table][tr][td class=number]05[/td]
[td class=content]border:1px solid #000; [/td][/tr][/table]

[table][tr][td class=number]06[/td]
[td class=content]min-height:8em; [/td][/tr][/table]

[table][tr][td class=number]07[/td]
[td class=content]height:auto; [/td][/tr][/table]

[table][tr][td class=number]08[/td]
[td class=content]} [/td][/tr][/table]

[table][tr][td class=number]09[/td]
[td class=content]/* for Internet Explorer */[/td][/tr][/table]

[table][tr][td class=number]10[/td]
[td class=content]/*\*/[/td][/tr][/table]

[table][tr][td class=number]11[/td]
[td class=content]* html .box { [/td][/tr][/table]

[table][tr][td class=number]12[/td]
[td class=content]height: 8em; [/td][/tr][/table]

[table][tr][td class=number]13[/td]
[td class=content]} [/td][/tr][/table]

[table][tr][td class=number]14[/td]
[td class=content]/**/[/td][/tr][/table]



Do IE6 không hiểu được thuộc tính min-height do đó chúng ta phải cố định chiều cao cho nó. Trong trường hợp nội dung có chiều cao lớn hơn height thì chiều cao trong IE6 sẽ tự động kéo dài xuống còn trong Firefox và một số trình duyệt khác sẽ sử dụng thuộc tính height: auto;.
Cách 2 Sử dụng pseudo code ( sếu đỏ Very Happy) :


Code:
 
[table][tr][td class=number]1[/td]
[td class=content].box { [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]width:expression(document.body.clientWidth > 500? "500px": "auto" ); /* Cái này là max width 500px*/[/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]height:expression(document.body.clientHeight > 200? "200px": "auto" ); /* Cái này là max height 500px */[/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]}[/td][/tr][/table]



Đoạn css trên có nghĩa là nếu chiều rộng > 500px thì nó sẽ fix thành 500, còn ko fải thì để auto. Cũng cùng ý nghĩa như vậy ở dòng thứ 2 là xử chiều cao. Còn min-width/height thì dựa theo max làm, ko khó lắm phải ko, chỉ đơn giản copy & paste
5. z-index

Những lỗi thường gặp khi viết Css Bug

Bug này xảy ra với IE 5,6,7 Bạn xem link này ở các IE vs Firefox sẽ thấy chúng nằm đè nhau loạn xạ [You must be registered and logged in to see this link.] . Theo đúng logic thì khối nào có z-index cao hơn sẽ đè lên z-index thấp hơn , vd : menu khi sổ xuống muốn nằm trên content ở dưới thì phải có z-index cao hơn , Một số trường hơp ở dưới là 1 tấm hình thì ko sao , cho cái hình đó z-index âm luôn , hầy ... nhưng mà nó có content thì z-index âm sao mà click được nữa ( vd : click vào tiêu đề )
Để fix bug này theo 1 số tut thì đã fix được VD : [You must be registered and logged in to see this link.] và còn nhiều site nữa bạn có thể google
Khổ nỗi fix bằng css như một số tut thì hình như không hiệu quả với mình . Đang lúc dùng drupal làm site thế là tìm thấy được 1 đoạn jquery fix ok sau đây
Code:
 
[table][tr][td class=number]1[/td]
[td class=content]$(function() { [/td][/tr][/table]

[table][tr][td class=number]2[/td]
[td class=content]    var zIndexNumber = 1000; [/td][/tr][/table]

[table][tr][td class=number]3[/td]
[td class=content]    $('div').each(function() { [/td][/tr][/table]

[table][tr][td class=number]4[/td]
[td class=content]        $(this).css('zIndex', zIndexNumber); [/td][/tr][/table]

[table][tr][td class=number]5[/td]
[td class=content]        zIndexNumber -= 10; [/td][/tr][/table]

[table][tr][td class=number]6[/td]
[td class=content]    }); [/td][/tr][/table]

[table][tr][td class=number]7[/td]
[td class=content]});[/td][/tr][/table]


Còn nhiều bug nữa mà mình ko liệt kê ra đây , bạn nào nhớ ra thì comment thêm ở dưới mình sẽ thêm vào bài viết này Tóm lại là vẫn phải cám ơn Microsoft với đứa con Í Ẹ của mình đã giúp code css ngày càng vất vả hơn !!!


[You must be registered and logged in to see this link.]

※ Bài viết cùng chuyên mục


https://windows.forumvi.com
 
Những lỗi thường gặp khi viết Css
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Windows Việt :: Công Nghệ Thông Tin :: Kinh nghiệm - Thủ thuật-
[Windows Việt] Deverloped by Nguyễn Gia Phú - https://windows.forumvi.com
Powered by © Forumotion.com - phpBB™ version ©phpBB2
Go to top Go to bottom