LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
Hoặc text box sau có độ dài width = 500px:
Các phần tử như vậy thường gây ra sự đổ vỡ layout, chúng chồng lên các layer nếu đó là các thẻ div (left column, right column...) ngay cả đối với các fluid-layer. Đối với thiết kế dạng table thì có thể hạn chế được sự chồng lấn này.
Bài viết này sẽ nêu lên 1 vấn đề xảy ra trên IE8 và Safari, liên quan đến các phần tử có độ dài lớn này. Sau đó sẽ nêu lên 1 workaround cho vấn đề này.
Trước hết xét đoạn code HTML sau:
| Text | Text2 | |
| LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText | ||
Kết quả khi chạy trên FireFox như dưới đây, 2 cell ở hàng đầu tiên có chứa dữ liệu (Text, Text2) tự co width theo như đúng yêu cầu.
Trên IE8 và Safari, các cell không tự co width, nguyên nhân do dữ liệu ở hàng thứ hai có độ dài liên tục (tương tự như thay bằng long textbox đề cập ở trên):
Hiện nay Safari chưa đưa ra một cách giải thích nào cho vấn đề này, tuy nhiên chúng ta có thể khắc phục được thông qua workaround như sau:
| Text | Text2 | |
| LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText | ||
Chúng ta sẽ đặt độ rộng của Cell ở giữa (hàng 1) thật lớn, đủ để ép 2 Cell ở 2 bên co lại vừa khít với dữ liệu bên trong. Cụ thể sẽ đặt width:5000px vì thực tế chưa có độ phân giải nào có độ rộng vượt quá giá trị này.
Bây giờ bạn thử chạy lại chương trình trên IE8 và Safari, kết quả sẽ giống như trên FireFox.
Happy Coding,
No comments:
Post a Comment