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

Question

您好，我正在尝试防止链接内的文本与父级一起倾斜。这是它的外观

.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 和 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，然后对其应用变换。