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>