如何將css3縮放應用於元素的第一個字母的僞元素？

我有一段帶第一個字母僞規則的段落標記。我想對第一個字母應用比例尺規則，但似乎不起作用。如何將css3縮放應用於元素的第一個字母的僞元素？

第一個字母的僞元素是否支持css3比例？

<p>This is some Text</p> 
<p>This is some more Text</p> 

p:first-child:first-letter { font-family: "Baskerville"; font-size: 60px; -webkit-transform: scaleX(.8); display: inline-block; }

來源

2011-09-28 zeckdude

爲什麼在這個問題上有3個downvotes？我看不出什麼不清楚或沒有用處。 – BoltClock

我無法弄清楚這一點。海事組織的問題沒有錯。 – stephenmurdoch

看看我的更新回答 –

正常工作here，您確定您正在使用Webkit瀏覽器查看結果嗎？

enter image description here

UPDATE：這是否工作：http://jsfiddle.net/szXHZ/5/

你必須浮動元素，你必須設置顯示阻止！

你將不得不混淆這種風格，因爲它看起來有點悲觀（爲了更好的外觀改變線條高度，也許刪除了我在第二段中提到的清晰度），但是變換確實徘徊時工作。你可以改變它，以便你不需要懸停，如果你喜歡。

來源

2011-09-28 01:22:49 stephenmurdoch

我在Mac和PC上的Chrome 14和Safari 5.1中查看它...不行，不能縮放到0.8。 – BoltClock

+1這也是工作解決方案，http://prntscr.com/38exw –

@BoltCock，很奇怪，我上傳了一張我看到的照片。也許這是一個平臺錯誤？我在Ubuntu上，在Chrome，Chromium和FF上都很好 - 所有相當新的版本 – stephenmurdoch

試試這個。

<p><span class="firstletter">T</span>his is some Text</p> 

.firstletter { font-family: "Baskerville"; -webkit-transform: scale(2); display: inline-block; }

現在，它的工作。 http://jsfiddle.net/sP3JZ/7/

來源

2011-09-28 01:17:18

thx downvote –

我沒有downvote，但我不是一個人好心地回答這個地址「X支持這個嗎？」與「Do Y」。也就是說，你確實提供了一個可行的替代方案，這就是爲什麼我沒有倒下的原因。 – BoltClock

@BoltClock你沒看到「但它似乎不起作用。」？我提出了另一個解決這個問題的方法。我的回答有什麼問題？ –

如何將css3縮放應用於元素的第一個字母的僞元素？

回答

相關問題