Background Image URL Show In IE But Not In Chrome

Bagi developer web application tentu sudah terbiasa dengan istilah HTML, CSS, maupun Javascript. Karena komponen tersebut diatas merupakan bagian penting dalam pembuatan website yang interaktif.

Dengan semakin berkembangnya standar HTML maupun CSS maka tiap-tiap browser mempunyai mekanisme tersendiri dalam merender tampilan website.

Meskipun sudah ada standar yang terangkum di W3C (World Wide Web Consorcium) namun kadang kala  browser yang berbeda mempunyai standar tersendiri dalam menterjemahkan HTML dan CSS.

Contoh kasus :

Seperti pada judul posting "Background Image URL Show In IE But Not In Chrome" ini, untuk style background image yang berisi parameter URL. Browser Chrome dan Internet explorer menampilkan visual yang berbeda untuk style tersebut.

.icon-spare-on
{
    /* for ie */
    background-position: center;
    background-size:15px;
    background-repeat:no-repeat;
    /* for chrome */
    height:16px;
    margin:5px;

    margin-left:1px;
}

.icon-opr-on {
    /* for ie */
    background-image:url(../../Icons/opr_on.png);
    /* for chrome */
    content:url(../../Icons/opr_on.png); 
}

Setidaknya kita perlu melakukan testing tampilan website yang kita bangun dengan menggunakan browser yang berbeda, Jika di salah satu browser tidak mensupport CSS yang berjalan di browser lain maka kita perlu menambah CSS khusus untuk browser tersebut, seperti terlihat pada contoh diatas.

Semoga posting tentang "Background Image URL Show In IE But Not In Chrome" diatas dapat bermanfaat.


Salam,