Question

I have a javascript that works fine in IE9 and Firefox, but not in Chrome. I’d like some advice to fix this issue.

I’m trying a cool trick to round the corner of images that I learned from http://www.bram.us/sandbox/roundedcorners/. I updated my css and included the javascript as in the above site, but actually all images disappear on Chrome while the other two browsers renders the rounded corners as intended.

I know this script works on Chrome as well, since http://www.bram.us/sandbox/roundedcorners/ works fine on Chrome.

Here is the javascript.

jQuery(function($) {
    $('img').wrap(function() {
        return '<span style="background-image:url(' + $(this).attr('src') + '); height: '+ $(this).height() + 'px; width: '+ $(this).width() + 'px;" class="rounded" />';
    });
});

Thanks in advance!!

Answer 1

Are you sure you didn’t forget to include any of these in your css for the .rounded class?

-webkit-border-radius

border-radius

display: block or display:inline-block