Cách sử dụng CSS3 Border Radius cho IE8 trở xuống

Như các bạn đã biết, CSS3 cho chúng ta khả năng tạo bo góc với thuộc tính border-radius. Nhưng thuộc tính này lại không được hỗ trợ từ các phiên bản IE8 trở về trước. Vì thế mà khi chúng ta áp dụng thuộc tính CSS3 Border Radius cho một phần tử HTML thì vẫn không có xuất hiện bo góc cho phần tử đó.

Có thể bạn sẽ nghe rất nhiều lời khuyên khác nhau đề nghị bạn bỏ qua IE8 trở về trước, vì chúng không còn được sử dụng rộng rãi. Tuy nhiên, nếu các bạn thiết kế website cho các tổ chức chính phủ hoặc ngân hàng, hoặc đơn giản hơn là “khách hàng” của các bạn muốn website hiển thị tốt cho cả IE8 trở về trước thì các bạn sẽ phải suy nghĩ lại.

CSS3Pie

Để giúp các bạn có thể sử dụng thuộc tính border-radius ngay cả trên IE8, mình xin giới thiệu các bạn CSS3Pie. Với CSS3Pie các bạn còn có thể làm cho IE8 hỗ trợ được cả các thuộc tính như Box Shadow và Gradients.

Cách sử dụng

Download CSS3Pie (ở đây). Đặt nó vào bên trong đường dẫn dự án của các bạn. Ở đây mình đặt nó vào folder css, như hình minh họa bên dưới.

Bây giờ, chúng ta sẽ thử áp đặt thuộc tính border-radius cho một phần tử HTML như sau :

    .border-radius {
        height: 100px;
        awidth: 100px;
        background-color: #2ecc71;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }

Với phần tử có thuộc tính awidth và height đều là 100px, thì khi border-radius được ấn định là 50px, phần tử đó sẽ thành hình tròn như sau:

Nhưng với IE8, thì nó vẫn chỉ là hình vuông giống thế này :

và để nó có thể hiểu được thuộc tính border-radius thì các bạn cần chèn thêm dòng này  behavior: url(css/pie.htc); như sau :

    .border-radius {
        height: 100px;
        awidth: 100px;
        background-color: #2ecc71;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        behavior: url(css/pie.htc);
    }

Các bạn nên chú ý là đường dẫn  url()  phải là đường dẫn ” tuyệt đối ” nha các bạn. Bây giờ các bạn thử refresh lại IE8, thì kết quả sẽ có bo góc thế này :

Xử lý sự cố

Tuy nhiên Internet Explorer có thể hiển thị những cái không như ý muốn. Và để giải quyết việc này, thì các bạn có thể chèn thêm thuộc tính position và zoom để xử lý như sau :

    <style>
    .border-radius {
        behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
        position: relative;
        zoom: 1;
    }
    </style>

Sử dụng CSS3 Pie trong WordPress

Nếu website của các bạn sử dụng WordPress, thì các bạn có thể đặt file pie.htc nằm trong folder css của theme mà các bạn đang dùng, và khai báo đường dẫn trong file css như sau:

    .border-radius {
        behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
        position: relative;
        zoom: 1;
    }

Hoặc đặt nó vào trong file header.php như sau:

<style>
.border-radius {
    behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
    position: relative;
    zoom: 1;
}
</style>

Mình hy vọng qua bài viết này, các bạn có thể sử dụng thật tốt những thuộc tính của CSS3 cho IE8 trở về trước.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster