CSS转换属性无法正常工作

Question

这是我的HTML和CSS代码，用于在dl元素中显示两个块中的文本我试图使用css transform scale属性将我的▶符号更改为不同的形状。但在某些浏览器中只显示第一列中的三角形？为什么会这样？我也试过webkit，moz前缀来渲染所有浏览器中的代码

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>

Answer 1

它正在使用chrome。问题出在您使用.dt的课程overflow:hidden中。只需删除它，它就会按预期工作。

以下是最终代码：

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>