Question

我有以下代码段： 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中不起作用。

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

Answer 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/

缩略图行在Chrome中运行良好，但在Firefox（bootstrap）中运行不正常

1 个答案: