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

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 ”和“内联 block ”元素。 (这有点像一个错误，请参阅 https://bugs.webkit.org/show_bug.cgi?id=58965)

作为解决方法，您可以添加以下内容:

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

另一种选择是在 anchor 元素周围添加一个包装器 div，并对其应用转换。