2

我有以下片段：http: //jsfiddle.net/v9ec3/51/

<div class="row">
    <ul class="thumbnails">
        <li class="span3">
            <button type="button" class="btn">
                <img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png">
            </button>
        </li>
        <li class="span3">
            <button type="button" class="btn">
                <img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png">
            </button>
        </li>
    </ul>
</div>

一排简单的缩略图。它在 Chrome 中看起来不错，但不知何故在 Firefox / IE 中不起作用。

难道我做错了什么？我相信页面中的所有内容都应该是跨浏览器兼容的。

4

1 回答 1

1

您的图像很大，并且这些图像在具有的.btn类内display:inline-block- 这意味着按钮将扩展以适应您的图像。

接下来的事情.span3是响应式的，这个跨度宽度会根据您的屏幕尺寸变小/变大，而不是您的.btn哪个有图像。

解决方案： 您可以通过将 btn 设置为块级别来修复它。申请类btn-block。

<body>
    <div class="row">
        <ul class="thumbnails">
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s15.postimg.org/gn3znajvf/img1.png"/>
                </button>
            </li>
            <li class="span3">
                <button type="button" class="btn btn-block">
                    <img class="img-rounded" src="http://s17.postimg.org/4wx50qtin/img2.png"/> 
                </button>
            </li>
        </ul>
    </div>
</body>

演示：http: //jsfiddle.net/shekhardesigner/Y7XE7/1/

于 2013-09-28T22:54:37.990 回答