Firefox的CSS身高問題

所以我有這個表http://mikepuerto.com/iNews/ -Firefox的CSS身高問題

我使用一些jQuery來排序。如果你在任何瀏覽器中看到這個，但是你會看到表頭有一個沿着底部運行的陰影，當你點擊一個標題時，一個箭頭指向你指出的那一列。由於某種原因，firefox沒有顯示陰影並確實顯示箭頭......我縮小了它與「th」上的高度有關。隨着高度和填充以下風格它在大多數其他瀏覽器上工作正常......它只適用於FF，如果我將高度設置爲69px;任何想法爲什麼會發生？

table.interactiveData thead tr th { 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    padding: 0 7px 16px 7px; 
    height: 54px; 
}

來源

2009-12-16 mike

影子也沒有在最新的Opera，僅供參考 – 2009-12-16 04:12:15

看起來像在FF它是第一個表格行後覆蓋它。

您可以通過使表的第一行不具有背景顏色並在其頂部添加邊距來修復。現在看看。

高度真的應該是70px，因爲那是背景圖片的高度。填充在FF中沒有效果。在FF中，選項卡看起來不錯，然後在其他版本中，只需確保背景爲白色即可。

將頁面中的css改爲此padding-bottom，並且由於所有其他樣式，padding-top在FF中不起作用。

  #slim { 
      width: 580px; 
      margin: 0 auto; 
     } 
     /* tables */ 
     table.interactiveData { 
      font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif; 
      background-color: ; 
      margin:10px 0pt 15px; 
      font-size: 10px; 
      width: 100%; 
      text-align: left; 
      border: 1px solid #dbdbdd; 
     } 

     table.interactiveData thead tr { 
      cursor: pointer; 
      background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg); 
     } 
     table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp { 
      background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat; 
     } 
     table.interactiveData tbody td { 
      padding: 7px; 
      vertical-align: middle; 
     } 
     table.interactiveData td.even { 
     } 
     table.interactiveData tr.odd { 
      background-color: #f3f3f3; 
     } 
     table.interactiveData td.sortedeven { 
      background-color:#edf8fa;   
     } 

     table.interactiveData td.sortedodd { 
      background-color:#edf1f2;    
     } 
     table.interactiveData thead tr th { 
      color: #fff; 
      font-size: 10px; 
      font-weight: bold; 
      height: 70px; 
    padding-left: 5px; 
    padding-right: 5px; 
     }

具體以#fff作爲覆蓋紅色的背景顏色。

table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp { 
     background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat; 
    }

然後將其設置爲70px高度，只設置左右邊距。如果你想填充頂部和底部，你將不得不把它們包在一個跨度或去另一條路線。

table.interactiveData thead tr th { 
      color: #fff; 
      font-size: 10px; 
      font-weight: bold; 
      height: 70px; 
    padding-left: 5px; 
    padding-right: 5px; 
     }

現在可用於FF，Chrome，IE和Safari。

全部標記

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

表 $（文件）。就緒（函數（）{ $（「＃interactiveData」）的tablesorter（{小部件：['斑馬'，'columnHighlight']}）; }

  ); 
    </script> 

    <link rel="stylesheet" href="styles.css" /> 
    <style> 
     #slim { 
      width: 580px; 
      margin: 0 auto; 
     } 
     /* tables */ 
     table.interactiveData { 
      font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif; 
      background-color: ; 
      margin:10px 0pt 15px; 
      font-size: 10px; 
      width: 100%; 
      text-align: left; 
      border: 1px solid #dbdbdd; 
     } 

     table.interactiveData thead tr { 
      cursor: pointer; 
      background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg); 
     } 
     table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp { 
      background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat; 
     } 
     table.interactiveData tbody td { 
      padding: 7px; 
      vertical-align: middle; 
     } 
     table.interactiveData td.even { 
     } 
     table.interactiveData tr.odd { 
      background-color: #f3f3f3; 
     } 
     table.interactiveData td.sortedeven { 
      background-color:#edf8fa;   
     } 

     table.interactiveData td.sortedodd { 
      background-color:#edf1f2;    
     } 
     table.interactiveData thead tr th { 
      color: #fff; 
      font-size: 10px; 
      font-weight: bold; 
      height: 70px; 
    padding-left: 5px; 
    padding-right: 5px; 
     } 

    </style> 
</head> 
<body> 
    <div id="slim"> 
    <table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0"> 
     <thead> 
      <tr> 

       <th>Rank</th> 
       <th>Broker-Dealer</th> 
       <th>Website</th> 
       <th>Discretionary Assets</th> 
       <th>Discretionary Assets 2007</th> 
       <th>Difference in Discretionary Assets 2007-2009</th> 

      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>data2b 
        <ul> 
         <li>item1</li> 

         <li>item2</li> 
         <li>item3</li> 
        </ul> 
       </td> 
       <td>1</td> 
       <td>data4d</td> 
       <td>data5e</td> 

       <td>data5e</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td> 
        data1f 
        <ul> 
         <li>item1</li> 

         <li>item2</li> 
         <li>item3</li> 
        </ul> 
       </td> 
       <td>data2g</td> 
       <td>data3h</td> 
       <td>data4i</td> 

       <td>data4i</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>data2l 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 

         <li>item3</li> 
        </ul> 
       </td> 
       <td>data3m</td> 
       <td>data4n</td> 
       <td>data5o</td> 
       <td>data5o</td> 

      </tr> 
      <tr> 
       <td>4</td> 
       <td>data2q 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 
         <li>item3</li> 

        </ul>     
       </td> 
       <td>data3r</td> 
       <td>data4s</td> 
       <td>data5t</td> 
       <td>data5t</td> 
      </tr> 

      <tr> 
       <td>5</td> 
       <td>data2q 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 
         <li>item3</li> 

        </ul> 
       </td> 
       <td>data3r</td> 
       <td>data4s</td> 
       <td>data5t</td> 
       <td>data5t</td> 
      </tr> 

      <tr> 
       <td>6</td> 
       <td>data2q 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 
         <li>item3</li> 

        </ul> 
       </td> 
       <td>data3r</td> 
       <td>data4s</td> 
       <td>data5t</td> 
       <td>data5t</td> 
      </tr> 

     </tbody> 
    </table> 
    </div> 
</body>

來源

2009-12-16 03:49:50

我沒有寫入包含「styles.css」;）只是在HTML中的東西。我把它交給別人..... – mike 2009-12-16 04:05:08

這是不同處理的填充。在Fx中，標題單元格上的填充不會影響單元格的大小，因此高度是指定的54px。

刪除標題單元格的高度設置，並在行上指定高度70px。

來源

2009-12-16 03:54:25 Guffa

嘗試跟隨您發佈的一個table.interactiveData thead tr規則設置

background-position:bottom:

。

編輯：同樣在一個規則你需要（或刪除有定心），所以都在一起，這是你所需要的：

 table.interactiveData thead tr { 
      cursor: pointer; 
      background: url(images/thead-bg.jpg); 
      background-position:bottom; 
      background-repeat:repeat-x; 
     } 
     table.interactiveData thead tr .headerSortDown, 
     table.interactiveData thead tr .headerSortUp { 
      background: url(images/thead-hover-bg.jpg) center bottom no-repeat; 
      /* changed to "center bottom", thanks Ryan */ 
     }

來源

2009-12-16 04:14:16

這是最好的解決方案。我認爲它已經位於底部。更簡單的是這兩條線背景：url（mikepuerto.com/iNews/images/...）center bottom no-repeat; background：url（mikepuerto.com/iNews/images/thead-bg.jpg）bottom;而不是中心。 – 2009-12-16 04:24:56

我通常不喜歡具有共享相同值集的字段的快捷方式屬性，因爲您不知道以前的答案而通過查看它而不知道哪個字段適用於哪種樣式。但是現在我在這裏使用它，因爲它在原始代碼中。 – 2009-12-16 04:47:16

Firefox的CSS身高問題

回答

相關問題