CSS在Chrome和Firefox中無法正確顯示

Question

我遇到某些樣式的問題，這些樣式無法在瀏覽器中正確顯示我創建的表。 特別是，我創建的類.rowB背景色沒有顯示出來，也沒有為cellBrdrRght類創建的右側邊框。

 @charset "UTF-8"; /* CSS Document */ /* info charts */ td{ vertical-align: middle; } .chartHeader{ background-color: #115967!important; color: #fff; text-align: center; font-weight: bold; } .rowA{ background-color: #d0d0d0!important; color: #4b4b4b; .rowB{ background-color: #666666!important; color: #fff; } .cellBrdrRght { border-style: solid!important; border-width: 0px 1px 0px 0px!important; border-color: white!important; } .cellnoBrd { border-style: none; } .tableFooter{ font-size: 10px; border-style: none; background-color: #115967!important; color: #fff; text-align: left; colspan: 3; a:sideBar { background-color: #115967!important; padding: 25px 50px 75px 100px; color: #fff; } 

 <link href="http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css" rel="stylesheet" type="text/css"> <div style="overflow-x: auto;"> <table> <tbody> <tr class="chartHeader"> <td class="cellBrdrRght">Plan Benefits</td> <td class="cellnoBrd" colspan="2">Current Benefits</td> </tr> <tr class="rowA"> <td class="cellBrdrRght">Description</td> <td class="cellBrdrRght">PPO</td> <td class="cellnoBrd">HDHP</td> </tr> <tr class="rowB"> <td class="cellBrdrRght" style="text-align:left;"><b>Deductible</b> In/Out-of-Network &amp; 2x Family</td> <td class="cellBrdrRght">$1,250/$2,250**</td> <td class="cellnoBrd">$3,000/$6,000**</td> </tr> <tr class="rowA"> <td class="cellBrdrRght" style="text-align:left;"><b>Coinsurance</b> In/Out-of-Network</td> <td class="cellBrdrRght">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td> <td class="cellnoBrd">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td> </tr> <tr class="rowB"> <td class="cellBrdrRght" style="text-align:left;"><b>Out-of-Pocket Maximum</b> In/Out-of-Network &amp; 2x Family</td> <td class="cellBrdrRght">$5,000/$10,000</td> <td class="cellnoBrd">$5,000/$10,000</td> </tr> <tr class="rowA"> <td class="cellBrdrRght" style="text-align:left;"><b>Primary/Specialist Office</b></td> <td class="cellBrdrRght">$30 PCP/$40 Specialist</td> <td class="cellnoBrd">Alaska Plan*: PCP 20%/20% Specialist 20%/20%<br> Non-Alaska Plan*: PCP 20%/40% Specialist 20%/40%</td> </tr> <tr class="rowB"> <td class="cellBrdrRght" style="text-align:left;"><b>Retail Prescriptions</b>Generic/Preferred/Non-Preferred</td> <td class="cellBrdrRght">$20/$45/$60</td> <td class="cellnoBrd">20%*</td> </tr> <tr class="tableFooter"> <td colspan="3">*After Deductible is met **Individuals in Family Tier need only meet individual deductible vs. family deductible</td> </tr> </tbody> </table> <hr/> </div> 

網頁： http ： //benefitsatbenefitelect.com/new/index.php/portfolio-item/dark-places/

CSS文件： http ： //benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css

Answer 1

@charset "UTF-8";
/* CSS Document */
/* info charts */

td{ 
    vertical-align: middle;
}
.chartHeader{
    background-color: #115967 !important;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.rowA{
    background-color: #d0d0d0 !important;
    color: #4b4b4b;
}
.rowB{
    background-color: #666666 !important;
    color: #fff;
}
.cellBrdrRght {
    border-style: solid !important;
    border-width: 0px 1px 0px 0px !important;
    border-color: white !important;
}
.cellnoBrd {
    border-style: none;
}
.tableFooter{
    font-size: 10px;
    border-style: none;
    background-color: #115967 !important;
    color: #fff;
    text-align: left;
    colspan: 3;
}
a:sideBar {
    background-color: #115967 !important;
    padding: 25px 50px 75px 100px;
    color: #fff;
}

更改此項，您的.rowA和.tableFooter在{}中未正確關閉...

Answer 2

您錯過了.rowA中的結束標記：

.rowA{
  background-color: #d0d0d0!important;
  color: #4b4b4b;
}

在.tableFooter中：

.tableFooter{
  font-size: 10px;
  border-style: none;
  background-color: #115967!important;
  color: #fff;
  text-align: left;
  colspan: 3;
  }

試試這個，它應該可以正常工作