Como posso alterar a largura de um modal do Bootstrap 3 no IE8?
Eu tenho que suportar o IE8. O modal em si funciona bem, mas minhas tentativas de redimensioná-lo (que funcionam bem no Firefox) não funcionam no IE8.
Eu estou apenas adicionando uma classe (wide-modal neste exemplo) para o div de diálogo modal (o segundo aninhado na estrutura de Bootstrap) e aplicando uma largura via CSS, nada extravagante.
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">×</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%;
}
Eu tentei adicionar a classe ao div acima e abaixo para nenhum efeito (positivo). Funciona como um charme onde está no Firefox, apenas nenhum efeito no IE8. Eu também tentei com uma largura de px, sem diferença. Eu tenho a biblioteca respond.js no lugar, então, em geral, o IE8 está se comportando diferente disso.