CSS轉換屬性無法正常工作

Question

這裏是我的HTML和CSS代碼，用於在dl元素中顯示兩個塊中的文本我試圖使用css transform scale屬性將我的▶符號更改爲不同的形狀。但在某些瀏覽器中只顯示第一列中的三角形？爲什麼這樣？我也試過的WebKit，MOZ前綴在所有瀏覽器中呈現的代碼

谷歌瀏覽器的老版本

谷歌瀏覽器最新版本

HTML

dl.textAdTitles { 
 
    columns: 1; 
 
    -webkit-columns: 1; 
 
    -moz-columns: 1; 
 
    columns: 2; 
 
    -webkit-columns: 2; 
 
    -moz-columns: 2; 
 
    -webkit-column-gap: 5px; 
 
    -moz-column-gap: 5px; 
 
    column-gap: 5px; 
 
    list-style-position: inside; 
 
    margin-left: 5px; 
 
    margin-right: 20px; 
 
} 
 

 
dt { 
 
    line-height: 1.5em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.textAdTitles dt:before { 
 
    font-family: Roboto,sans-serif; 
 
    font-weight: bolder; 
 
    font-size: 14px; 
 
    width: 12px; 
 
    height: auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-right: 0px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    content: ' ▶ '; 
 
    font-size: 10px; 
 
    color: #000000; 
 
    font-weight: bolder; 
 
    transform: scale(0.5,1); 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <dl class="textAdTitles"> 
 
       <dt height="10%" style=""> 
 
        Sample text 1 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 2 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 3 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 4 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 5 
 
       </dt> 
 
      </dl> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 1

它在鉻中工作。唯一的問題是您正在使用overflow:hidden的課程.dt。只要刪除它，它按預期工作。

下面是最終代碼：

dl.textAdTitles { 
 
    columns: 1; 
 
    -webkit-columns: 1; 
 
    -moz-columns: 1; 
 
    columns: 2; 
 
    -webkit-columns: 2; 
 
    -moz-columns: 2; 
 
    -webkit-column-gap: 5px; 
 
    -moz-column-gap: 5px; 
 
    column-gap: 5px; 
 
    list-style-position: inside; 
 
    margin-left: 5px; 
 
    margin-right: 20px; 
 
} 
 

 
dt { 
 
    line-height: 1.5em; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.textAdTitles dt:before { 
 
    font-family: Roboto,sans-serif; 
 
    font-weight: bolder; 
 
    font-size: 14px; 
 
    width: 12px; 
 
    height: auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-right: 0px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    content: ' ▶ '; 
 
    font-size: 10px; 
 
    color: #000000; 
 
    font-weight: bolder; 
 
    transform: scale(0.5,1); 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <dl class="textAdTitles"> 
 
       <dt height="10%" style=""> 
 
        Sample text 1 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 2 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 3 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 4 
 
       </dt> 
 
       <dt height="10%" style=""> 
 
        Sample text 5 
 
       </dt> 
 
      </dl> 
 
     </td> 
 
    </tr> 
 
</table>