TD高度對元素有效，但不是來自CSS

我有一些表格單元格，我想爲其設置高度。
它的工作原理完全一樣要等到我直接設置高度的元素：TD高度對元素有效，但不是來自CSS

<td class="row-separator" style="height: 5px;"></td>

但是，當我嘗試從我的頁面頂部的CSS做它不工作：

td.row-separator { 
    height: 5px; 
    border-left: 0; 
    border-right: 0; 
    background-color: grey; 
}

應用了所有其他CSS屬性，但不是高度。這發生在Firefox和IE中。什麼可能導致這個？

來源

2016-12-09 voodoo-burger

我認爲有，影響了TD的高度，也是其他CSS。由於內聯樣式旨在覆蓋任何外部定義，因此可能適用。你可以很容易地檢查你的網頁瀏覽器的檢查員。 – connexo

你能提供一個證明問題的[mcve]嗎？我做了一個[小提琴]（https://jsfiddle.net/MrLister/d9uygvL1/），沒有顯示任何區別。 –

@connexo這也是我的第一個想法，但這是頁面頭部最後一個頁面級CSS聲明。 –

必須有其他影響td的height的CSS。由於內聯樣式（直接在HTML元素上的style屬性中聲明的樣式）旨在覆蓋任何外部定義，因此可能適用。你可以很容易地檢查你的網頁瀏覽器的檢查員。

看到這兩個例子：

#box p { 
 
    font-size: 32px; 
 
} 
 
p.some-text { 
 
    font-size: 16px; 
 
}

<div id="box"> 
 
    <p class="some-text">This is 32px because #box makes the selector way more specific than p.some-text</p> 
 
    <p class="some-text" style="font-size: 16px;">Inline styles have the highest specificity and can only be overwritten using !important (which you should not)</p> 
 
</div>

（提示，即使你的代碼沒有它：這個例子也說明了爲什麼你不應該使用#id選擇在你的CSS ）

要了解有關CSS「優先級」（稱爲特異性）的更多信息，請從此處開始：

特定性是瀏覽器決定哪個CSS屬性值與元素最相關的方法，因此將被應用。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

來源

2016-12-09 10:44:38 connexo

@ Quentin對我的原始問題的評論和使用！來自@Sebastian的重要信息Brosch的答案解決了這個問題：從上面的元素繼承高度，儘管'row-separator'CSS聲明稍後出現。我想繼承並不總是100％自上而下。 –

正如我所說的，瞭解CSS特性（至少了解其基礎知識）是不可避免的。 **除非您確切地知道*爲什麼*絕對**是不可避免的**，否則絕對不要使用'！important;'。 – connexo

請注意'！important'可以用作調試工具。如果添加'！important'作品，那麼你會知道這是一個特殊問題。如果沒有，那麼在別的地方有一個錯誤！ –

TD高度對元素有效，但不是來自CSS

回答

相關問題