CSS変換プロパティが正しく動作していません

Question

ここではdl要素の2つのブロックにテキストを表示するためのHTMLとCSSコードです。CSS変換スケールプロパティを使用して自分の▶シンボルを別のシェイプに変更しようとしました。しかし、いくつかのブラウザでは、最初の列に三角形だけが表示されますか？それはなぜそれのようなものですか？また、私は、すべてのブラウザ

Google Chromeの古いバージョン

Google Chromeの最新バージョン

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>

でコードをレンダリングするためのMOZプレフィックスをWebKitのを試してみました

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>