Question

我有以下代码

图像在Chrome和Firefox上正常显示，但在Internet Explorer上图像看起来很大。我应该做些什么调整才能在每个浏览器上看到相同的图像尺寸？

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>mytitle</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-xs-6">
        <button data-toggle="modal" data-target="#maths_modal">
                <figure>
                    <img src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" class="img-responsive">
                    <figcaption>Caption under my image</figcaption>
                </figure>
            </button>
      </div>

</body>

</html>

＆＃13;

（即使没有数字元素，错误仍然存在）

Answer 1

Bootstrap 3和IE11的常见问题，请在您的css文件中尝试：

.img-responsive {width: 100%;}

Answer 2

经过一些测试后，我找到了解决这个问题的方法由于在引导程序中<button>和<a>的行为相同，我将<button>替换为<a>并解决了兼容性问题

Button中的图像大小在Internet Explorer中无法正确格式化

2 个答案: