html - CSS 转换属性无法正常工作

Question

这是我的 HTML 和 CSS 代码，用于在 dl 元素的两个 block 中显示文本 我尝试使用 css transform scale 属性将我的 ▶ 符号更改为不同的形状。但是在某些浏览器中只在第一列显示三 Angular 形？为什么会这样？我还尝试了 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

它在 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>