我有一個內聯元素(a & ltspan & gt)嵌套在一個& lth1 & gt標簽。我對h1應用了一個transform屬性(傾斜，使它看起來像一個平行四邊形)。 我需要將& ltspan & gt標記為& quotunskew & quot它和它的文本。但這似乎只在IE中有效。

下面是一個HTML和CSS的例子:

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  transform: skew(15deg);
}

<h1><span>This is a Title</span></h1>

解釋: A & ltspan & gt或者一個鏈接(& lta & gt)是行內元素，transform屬性不適用于行內元素。 以下是CSS轉換模塊級別1中的可轉換元素列表。

解決方案: 將范圍的顯示屬性設置為“內嵌塊”或“塊”。這將允許您對span元素應用變換。 它也適用于其他行內元素，如& lta & gt& ltem & gt& ltstrong & gt...(參見MDN上的內聯元素列表)。

這是一個帶有& ltspan & gt和link & lta & gt元素:

h1 {
  background: teal;
  padding: .25em .5em;
  margin: 1em;
  transform: skew(-15deg);
}
h1 span,
h1 a {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}

<h1><span>This is a span in a title</span></h1>
<h1><a href="#">This is a link in a title</a></h1>

有點晚了，但是你可以

h1 span{
   position:absolute;
}

然后正常使用CSS3轉換屬性。演示:

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
  height: 40px;
}

h1 span {
  position: absolute;
  left: 20px;
  color: #fff;
  transform: skew(15deg);
}

<h1><span>This is a Title</span></h1>