Sự khác nhau về độ rộng của các thành phần trên IE và FF


Mấy anh chị trình duyệt này chẳng ai chịu ai, rốt cuộc là khổ mấy người làm web thôi. vấn đề này chắc hẳn ai cũng gặp, cách giải quyết này chưa hẳn đã tối ưu. Bạn có cách nào khác không?

Bài viết này nguyên gốc được viết trong blog cá nhân của tôi nên từ ngữ không "chỉn chu" phù hợp với site này xong tôi không muốn sửa lại chúng, mong bạn đọc thông cảm nhé.


nếu viết đoạn mã trang web với css như sau:

<html>
<head>
<style type="text/css">
html, body{
height:100%;
background-color:black;
}
#dvContainer{
width:780px;
height:100%;
background-color:white;
padding:0px;
}
#dvContent{
width:100%;
border:solid 2px blue;
background-color:yellow;
}
</style>
</head>
<body>
<div id="dvContainer" >
<div id="dvContent">content</div>
</div>
</body>
</html>

thì trên IE hiện ngon: bà con sẽ thấy cái dvContainer nó bao lấy cái dvContent (6, chắc v7 cũng vậy).
Nhưng còn thằng FF thì lại không, dvContainer sẽ có width=780px còn dvContent sẽ có width=780px * 100% + 4px (=2*2 kích thước border); kết quả là cái dvContent nó thò ra ngoài 4px;
Mình chưa đo cụ thể nhưng giải pháp là khi các thành phần bao, chứa có border thì độ rộng của thằng ở trong nhớ trừ đi độ dày border nhé


( đã được xem 3206 lần từ 12/03/2009 )

Phản hồi bài viết

   
Họ tên  
Email*
Mã xác thực email
Tiêu đề*  
Nội dung*  
Đính kèm 
 
 
Thái bình hoanghontim@...
Gửi anh
tôi thấy mấy ví dụ này có vẻ vớ vẩn
Trần Xuân Hạnh kentfithou@...
IE & FF
Cách của pác "Cựu sinh viên" đc đấy ! chạy ngon hết trên IE & FF máy e ko có Opera nên ko bít nó có ngon lành ở đó ko ? Chạy 2 thằng này đã đủ mệt lắm rui` !
Cựu sinh Viên quan_seu@...
Fix trình duyệt
Chào thầy Dũng,
Để giải quyết vấn đề trên em xin có vài dòng nhận xét như sau:
- cách làm của thầy là trừ đi độ rộng của boder, ở đây là 2x2=4px có phải ko ạ.
#dvContent{
width:776pc;
border:solid 2px blue;
background-color:yellow;
}
như vậy thì em test trên FF và Opera thì ok, nhưng IE8 thì nó bị thụt vào 4px.
- Em chỉ cẩn để độ rộng của lớp dvcontent là auto thì ổn trên cả IE8, FF và Opera
#dvContent{
width:auto;
border:solid 2px blue;
background-color:yellow;
}

----Máy em chỉ cài có 3 trình duyệt này :D----
Vũ Hoàng phúc - 0207b1 phucvh@...
thuộc tính padding cũng tương tự như trên
thầy Dũng đã nói về vấn đề border nếu có thì FF và IE nó tính độ rộng khác nhau, và theo kinh nghiệm của mình thì khi sử dụng Padding cũng tương tự, ví dụ với style: style="width: 50px; padding-left: 5px" thì chiều rộng tổng cộng của khung là 55px và như thế sẽ không bị vỡ khung của bạn => ok cả FF Và IE
Trang 1
Tôi là Lê Hữu Dũng
Giảng viên CNTT
Khoa Công nghệ Tin học
Viện Đại học Mở Hà Nội