Internet Explorer Adds Height- and Width-Attributes to a Newly Appended Image Automatically

Internet Explorer adds height- and width-attributes to a newly appended image automatically

Try this:

img {
    height: 150px;
    width: auto;
}

Javascript images behave differently in IE

because it seems like IE sets the width and height attributes of a dynamically created image

Well, I would not phrase it that way. I would rather say, trying to “make” a JS Image element into append-able HTML code by using $(image) seems to have this unexpected result here - but that code looks “weird” to me to begin with.

Once you replace that with a simple

$("div").append('<img src="http://placehold.it/350x1200">');

IE 11 shows the image the same as the other browsers.

Getting auto size of IMG before adding it to DOM (Using JQuery)

You should be able to do this without appending the image to the DOM. Kristoffer (hey that's my name too!) is on the right track but the image needs to be loaded before you can try to read the width / height.

var getImageSize = function(src) {
    var img = new Image();
    $(img).bind('load', function(e) {
        var height = img.height;
        var width = img.width;
        document.write('width:' + width + ', height: ' + height);
    });
    img.src = src;
};

getImageSize('http://farm4.static.flickr.com/3261/5791911248_b777cb1dde_b.jpg');

Demo here: http://jsfiddle.net/H3p97/

jQuery: new image added to DOM always has width 0 after loaded

I found a reliable solution for Safari:

• Create the image
• Attach the load() handler
• Only AFTER that, set the src attribute!!

I still don't understand why width should ever return zero, but it seems that unexpected things happen if you attach the load handler only after setting the src. I got that idea only because I encountered yet another problem with IE (which didn't even call the load handler since it considered the image loaded before the handler was attached), so the lesson I've learnt is to always do things in the order described above.

Get image height in IE of display:none image?

Try this:

1. Position it offscreen
2. set it to display:block
3. get its height
4. set it back to display:none
5. re-position it back where it was

css url() not recognized in internet explorer 10

The content property is only valid on :before and :after pseudo-elements. You should change it to:

.ui-icon-zoom-in { 
  background: url(images/16x16/ZoomIn.png) no-repeat; 
  width:16px;
  height:16px;
}

Apart from that, IE8+ only supports content property if a valid DOCTYPE is specified.

---

Related Topics