排縮略圖作品在Chrome中正常，但不能在Firefox（引導）

我有下面的代碼片段： http://jsfiddle.net/v9ec3/51/排縮略圖作品在Chrome中正常，但不能在Firefox（引導）

<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中不起作用。

我做錯了什麼？我相信頁面中的所有內容都應該是跨瀏覽器兼容的。

來源

2013-09-28 AAlon

你是什麼意思它不工作，以什麼樣的方式，也是你的小提琴完全是空的 –

的jsfiddle固定。縮略圖彼此重疊：http://s22.postimg.org/843o1s2ap/Screenshot.jpg – AAlon

你的css在哪裏？當沒有樣式時，UL'元素顯示垂直列表 –

你的圖像很大，這些圖像是在.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-28 22:54:37

謝謝，這工作:) – AAlon

排縮略圖作品在Chrome中正常，但不能在Firefox（引導）

回答

相關問題