Sửa lỗi hiển thị label cloud trên trình duyệt Opera

Trong quá trình customize cho template mình luôn test trên các trình duyệt phổ biến hiện nay. Là một người tỉ mỉ trong từng chi tiết nhưng đến khi thêm thuộc tính border-bottom cho tên label cloud và test trên trình duyệt Opera thì mới phát hiện ra có chuyện "bất thường" với tên label. Cụ thể ở đây label Graphic đã dạt ra khỏi layout của blog, label Drive đè lên label Desktop Tools.


Vậy chuyện gì đã xảy ra với trình duyệt Opera này trong khi các trình duyệt khác vẫn hiển thị tốt? Việc hiển thị này chắc chắn có liên quan đến style sheet của blog. Ngoài style sheet nằm trong cặp thẻ <b:skin> thì mỗi blog còn một file css nằm bên ngoài, với blog của mình nó có tên là 1743847221-widget_css_bundle.css. Sau khi save as blog, mình loại bỏ liên kết tới file css này và chạy thử trên trình duyệt Opera thì các label đã hiển thị đầy đủ trên sidebar. Như vậy có thuộc tính nào đó trong file css này đã gây lỗi hiển thị với trình duyệt Opera. Dưới đây là các thuộc tính của label cloud được lưu trong file 1743847221-widget_css_bundle.css.

.label-size-1{font-size:80%;filter:alpha(80);opacity:.8}
.label-size-2{font-size:90%;filter:alpha(90);opacity:.9}
.label-size-3{font-size:100%}
.label-size-4{font-size:120%}
.label-size-5{font-size:160%}
.cloud-label-widget-content{text-align:justify}

Blog của mình hiện giờ label Graphic gán với class label-size-1 và label Desktop Tools gán với class label-size-2. Nhìn đoạn css trên có thể thấy 2 class label-size-1 và label-size-2 có thêm thuộc tính so với 3 class còn lại. Thử loại thuộc tính opacity đi thì Opera đã hiển thị đầy đủ label trên sidebar. Nguyên nhân là do thuộc tính opacity.

Opacity là thuộc tính làm mờ có giá trị từ 0 đến 1, mình vẫn sử dụng để tạo hiệu ứng mờ ảnh ở liên kết back to top và hiển thị tốt trên Opera. Không thể can thiệp vào file 1743847221-widget_css_bundle.css để loại bỏ thuộc tính này, chúng ta sẽ khai báo nó ở css trong template và đặt giá trị là 1. Thêm đoạn mã sau vào cặp thẻ <b:skin> trong template của bạn:

.label-size-1,.label-size-2{opacity:1.0}

Như vậy với các label có class là label-size-1, label-size-2 chúng sẽ không mờ đi nữa, điều này không quan trọng lắm.

Chỉ còn một vấn đề với blog của mình là border-bottom và background khi hover của các label đầu dòng dưới vẫn còn "rơi vãi" bên trên. Nguyên nhân do thuộc tính text-align được căn đều và Opera hiển thị nó thật tồi. Hoặc là căn trái, phải hay giữa, hoặc là bỏ border-bottom và background khi hover đi nhưng mình vẫn để vậy, nó hiển thị tốt trên các trình duyệt còn lại và đây là vấn đề của Opera.