CSS - 轉換函數不能在鏈接上工作？

Question

當href的擴展名是.pdf時，我喜歡這麼做; .DOC; .PPT; .xls然後它會在它前面添加相應的文件圖片。然後我試着讓鏈接變得更小，但我沒有做任何事情！我做錯了什麼？

代碼：

ul{ 
 
    list-style-type: none; 
 
} 
 
ul a{ 
 
    text-decoration:none; 
 
    padding-left: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
ul a:hover{ 
 
    text-decoration:underline; 
 
    color:#666; 
 
    -moz-transform: scale(0.9); 
 
    -webkit-transform: scale(0.9); 
 
    -ms-transform: scale(0.9); 
 
    transform: scale(0.9); 
 
} 
 
a[href$=".pdf"]{ 
 
    background-image:url(http://i.stack.imgur.com/zJlYq.gif); 
 
} 
 
a[href$=".doc"]{ 
 
    background-image:url(http://i.stack.imgur.com/z2lbW.gif); 
 
} 
 
a[href$=".ppt"]{ 
 
    background-image:url(http://i.stack.imgur.com/Tk5Vv.gif); 
 
} 
 
a[href$=".xls"]{ 
 
    background-image:url(http://i.stack.imgur.com/sOr7E.gif); 
 
}

<ul> 
 
    <li><a href="/one.pdf">pdf</a></li> 
 
    <li><a href="/two.doc">doc</a></li> 
 
    <li><a href="/three.ppt">ppt</a></li> 
 
    <li><a href="/four.xls">xls</a></li> 
 
</ul>

Answer 1

您應該使用display: inline-block爲<a>標籤（或display: block），因爲<a>在默認情況下display: inline，但transformable element不能與在一起：

Transformable element - 的元件，其佈局由CSS盒模型，其可以是一個塊級或原子行內元素，或...管轄

Inline-block - 該值導致一個元件生成內聯級塊容器。內聯塊的內部被格式化爲塊框，並且該元素本身被格式化爲原子內聯級別框。

ul { 
 
    list-style-type: none; 
 
} 
 

 
ul a { 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
} 
 

 
ul a:hover { 
 
    text-decoration: underline; 
 
    color: #666; 
 
    -webkit-transform: scale(0.9); 
 
    -moz-transform: scale(0.9); 
 
    -ms-transform: scale(0.9); 
 
    transform: scale(0.9); 
 
} 
 

 
a[href $= '.pdf'] { 
 
    background-image: url(http://i.stack.imgur.com/zJlYq.gif); 
 
} 
 

 
a[href $= '.doc'] { 
 
    background-image: url(http://i.stack.imgur.com/z2lbW.gif); 
 
} 
 

 
a[href $= '.ppt'] { 
 
    background-image: url(http://i.stack.imgur.com/Tk5Vv.gif); 
 
} 
 

 
a[href $= '.xls'] { 
 
    background-image: url(http://i.stack.imgur.com/sOr7E.gif); 
 
}

<ul> 
 
    <li><a href="/one.pdf">pdf</a></li> 
 
    <li><a href="/two.doc">doc</a></li> 
 
    <li><a href="/three.ppt">ppt</a></li> 
 
    <li><a href="/four.xls">xls</a></li> 
 
</ul>

Answer 2

放在鏈接元素display: inline-block。您似乎無法轉換內聯元素。此外 - 你的語法應該是完全有效的，儘管你可能有太多的前綴。只有IE9應該需要MS前綴，我懷疑任何其他人都需要。

Answer 3

transform不適用於內聯元素，如<a>。您可以將鏈接顯示爲內聯塊或塊以使變換生效！

變形元件 一種可變形元件是在這些類別之一的元素：

• 一個元件，其佈局由CSS盒模型，其可以是一個塊級或原子inline-管轄高級元素，或者其顯示屬性計算爲表格行，表格行組，表格標題組，表格標題組，表格標題或表格標題[CSS21]

• SVG命名空間，並且不受CSS盒子模型的支配屬性轉換，'patternTransform'或gradientTransform [SVG11]。

http://www.w3.org/TR/css3-transforms/#transformable-element
http://www.w3.org/TR/css3-transforms/#transform-property

此代碼工作：

ul{ 
 
    list-style-type: none; 
 
} 
 
ul a{ 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    padding-left: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
ul a:hover{ 
 
    display:inline-block; 
 
    text-decoration:underline; 
 
    color:#666; 
 
    -moz-transform: scale(0.9); 
 
    -webkit-transform: scale(0.9); 
 
    -ms-transform: scale(0.9); 
 
    transform: scale(0.9); 
 
} 
 
a[href$=".pdf"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
} 
 
a[href$=".doc"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
} 
 
a[href$=".ppt"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
} 
 
a[href$=".xls"]{ 
 
    background-image:url(http://placehold.it/20x20); 
 
}

<ul> 
 
    <li><a href="/one.pdf">pdf</a></li> 
 
    <li><a href="/two.doc">doc</a></li> 
 
    <li><a href="/three.ppt">ppt</a></li> 
 
    <li><a href="/four.xls">xls</a></li> 
 
</ul>