如何防止从倾斜的父级继承的文本的转换

Question

嘿，我正在尝试防止 link 中的文本与父项一起倾斜。这是它的样子

.one {
 width:300px;
 height:250px;
 list-style:none;
 color:#FFF;
}
.one li {
 
 width: 115px;
   height: 100px;
  
  text-align:center;
 
   
 
   display: inline-block;
  -moz-transform: translate(0px, -1px) skew(0deg, -5deg);
-webkit-transform: translate(0px, -1px) skew(0deg, -5deg);
-o-transform: translate(0px, -1px) skew(0deg, -5deg);
-ms-transform: translate(0px, -1px) skew(0deg, -5deg);
transform: translate(0px, -1px) skew(0deg, -5deg);
 background-color:rgba(239,82,85,1.00);
}
.one li a {


-moz-transform: translate(0px, 1px) skew(0deg, 5deg);
-webkit-transform: translate(0px, 1px) skew(0deg, 5deg);
-o-transform: translate(0px, 1px) skew(0deg, 5deg);
-ms-transform: translate(0px, 1px) skew(0deg, 5deg);
transform: translate(0px, 1px) skew(0deg, 5deg);
  
 
}

<div class="one">
<ul>



<li>

<a href="#">this is the test</a>


</li>
<li>

<a href="#">this is the test</a>


</li>


</ul>

</div>

我从这里阅读了这些文章，遇到了类似的问题，但我的似乎有点不同。 Slant the top of a div using css without skewing text and Reset angle of text in skewed div using CSS。请帮我 css

Answer 1

CSS 转换不适用于 Webkit 浏览器（Safari 和 Chrome）中的内联元素。只能转换 "block" 和 "inline-block" 元素。（这有点像一个错误，请参阅 https://bugs.webkit.org/show_bug.cgi?id=58965 ）

作为解决方法，您可以添加：

.one li a { display:inline-block; }

另一种选择是在锚元素周围添加一个包装器 div，然后对其应用变换。

如何防止从倾斜的父级继承的文本的转换

how to prevent transformation of text inherited from a skewed parent

html

css

transformation