How can I change the width of a Bootstrap 3 modal in IE8?

How can I change the width of a Bootstrap 3 modal in IE8?

I have to support IE8. The modal itself works fine, but my attempts to
resize it (which work fine in Firefox) don't work in IE8.
I'm just adding a class (wide-modal in this example) to the modal-dialog
div (the 2nd nested one in the Bootstrap structure) and applying a width
via CSS, nothing fancy.
HTML:
<div class="modal fade" id="modalTest" role="dialog">
<div class="modal-dialog wide-modal">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title">Testing Modal</h4>
</div>
<div class="modal-body">
<img src="content/Example-Infographic.jpg" width="100%" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
CSS:
.wide-modal {
width: 60%;
}
I tried adding the class to the div above and below to no (positive)
effect. It works like a charm where it is in Firefox, just no effect at
all in IE8. I also tried with a px width, no difference. I do have the
respond.js library in place so in general IE8 is behaving other than this.