內聯CSS會產生不同的結果，那麼等效CSS類

請刪除 - 這是一個錯字:)內聯CSS會產生不同的結果，那麼等效CSS類

下面的CSS

display: table; height: 100%;

工作在在線模式很好，不工作被提取成CSS類。我如何解決它？

帶內嵌CSS（工作版本）的HTML，重現問題搜索首次出現的「display：table; height：100％;」然後創建一個類.blah {display：table;身高：100％; } 並嘗試使用它而不是內聯CSS。

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div style="margin: 100px; width: 100px; height: 430px; background-color: gray; border: 1px solid gray;"> 
     <table style='background-color: white; width: 100%; height: 100%; border-collapse: collapse; vertical-align: top;'> 
      <tr> 
       <td style='height: 33.33%;'> 
        <div style="position: relative; width: 100%; height: 100%;"> 
         <div style="position: absolute; top: -50%; height: 100%; background-color: green;"> 
          <div style="display: table; height: 100%;"> 
           <div style="display: table-cell; vertical-align: middle;"> 
            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">A</div> 
           </div> 
          </div> 
         </div> 
         <div style="position: absolute; bottom: -50%; height: 100%;"> 
          <div style="display: table; height: 100%;"> 
           <div style="display: table-cell; vertical-align: middle;"> 
            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">B</div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="height: 33.33%;"> 
        <div style="position: relative; width: 100%; height: 100%;"> 
         <div style="position: absolute; bottom: -50%; height: 100%;"> 
          <div style="display: table; height: 100%;"> 
           <div style="display: table-cell; vertical-align: middle;"> 
            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">C</div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="height: 33.33%;"> 
        <div style="position: relative; width: 100%; height: 100%;"> 
         <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;"> 
          <div style="display: table; height: 100%;"> 
           <div style="display: table-cell; vertical-align: middle;"> 
            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">D</div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 

</body> 
</html>

來源

2013-05-17 user1514042

該問題可能與CSS中的另一種樣式有關，覆蓋了類中定義的樣式。內聯樣式具有更高的優先級。

在這個JSFiddle，事情是在內聯和類的情況下工作。

CSS

.test { 
    display: table; 
    height: 100%; 
    background:#ccc; 
}

HTML：

<div style="height:100px"> 
    <div class="test"> 
     Hi 
    </div> 
    <div style="display: table; height: 100%; background:#ccc;"> 
     World 
    </div> 
</div>

編輯：雖然我知道你可能不尋求編碼等的意見，然後回答你的問題，我想你應該嘗試儘可能減少內聯樣式。特別是因爲HTML中的每一行都有內聯樣式。至少有一些屬性可以移動到一個類中，使代碼更好，並且更容易避免像這樣的簡單CSS優先級問題。

來源

2013-05-17 15:56:41 DannyB

內聯CSS會產生不同的結果，那麼等效CSS類

回答

相關問題