add docs about scale .img-responsive svg for IE 11

[alexander-akait]

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    width: 100%;
}

Before hack:

After hack:

[cvrebert]

Please post a JS Bin demonstrating the problem and proposed fix.
And feel free to open a pull request for your proposed fix.

[alexander-akait]

@cvrebert
IE version: 11.0.9600.17842
Update Version: 11.0.20 (KB3058515)
Without hack: http://output.jsbin.com/vurutizura/
With hack: http://jsbin.com/gulorudeyu/

[Johann-S]

Confirmed on :
Win7 IE version: 11.0.9600.17843
Update Version: 11.0.20 (KB3058515)

[cvrebert]

X-Ref: #10073, #13996

[cvrebert]

@evilebottnawi That hack isn't feasible. It will cause non-SVG images to be stretched beyond their natural dimensions, which is undesirable; see #13996.

[alexander-akait]

@cvrebert how about use hack for class .img-responsive with filename end on .svg?

[alexander-akait]

@cvrebert hack with

.img-responsive {
    width: 100% \9;
}

Not working in ie11 and no docs about this bugs

[cvrebert]

how about use hack for class .img-responsive with filename end on .svg?

We ruled that out in the previous issues.

[alexander-akait]

@cvrebert

.img-responsive {
    width: 100% \9;

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        &[src$="svg"],
        .thumbnail > img[src$="svg"],
        .thumbnail a > img[src$="svg"],
        .carousel-inner > .item > img[src$="svg"],
        .carousel-inner > .item > a > img[src$="svg"] {
            width: 100%;
        }
    }
}

How about this construction, working in IE8-IE10, and IE11, http://dev.l-c-n.com/CSS3-selectors/browser-support.php, may be working in IE7, need testing

[cvrebert]

@evilebottnawi Like I said, we've already ruled out [src$="svg"] as insufficiently general; see #13996 (comment)

[mdo]

Punting with no reply. Happy to revisit though with a viable fix.