Question

嗨，我试图阻止链接中的文本与父级一起倾斜。这是它的外观

＆＃13;

.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);
		
	
}

＆＃13;

<div class="one">
<ul>



<li>

<a href="#">this is the test</a>


</li>
<li>

<a href="#">this is the test</a>


</li>


</ul>

</div>

＆＃13;

我从这里读过这些文章有类似的问题，但似乎我的有点不同。 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）中的内联元素。只有＆＃34;阻止＆＃34;和＆＃34;内联块＆＃34;元素可以转化。（它有点像一个错误，请参阅https://bugs.webkit.org/show_bug.cgi?id=58965）

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

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

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

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

1 个答案: