Safari瀏覽器和Chrome瀏覽器，旋轉文本的位置去幹擾

好吧，我通常在這裏找到我的問題的答案，但這次我沒有，所以現在我會問我的第一個在這裏！ :)Safari瀏覽器和Chrome瀏覽器，旋轉文本的位置去幹擾

我有我的網頁上的一些旋轉的文本，它是使用位置處被定位：絕對的，象下面這樣：

.rotate-box .rotate-text{ 
    display: block; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
    position: absolute; 
    left: -45px; 
    top: 170px; 
} 

<div class="rotate-box"> 
    <span class="rotate-text">Rotated text</span> 
</div>

能正常工作在所有瀏覽器（與WebKit的）除了Safari和Chrome的地方文本顯示比其他瀏覽器低約90px。

爲了防止這種情況我也補充說：

@media screen and (-webkit-min-device-pixel-ratio:0){ 
    .rotate-text {top: 80px !important;} 
}

現在的文本在所有瀏覽器正確的地方，但這個感覺不對我...我失去了一些東西在這裏？

我討厭加入瀏覽器異常代碼，它往往會回來咬你從長遠來看...：○

問候，安德斯

來源

2012-03-07 Anders

改變這一行：

-webkit-transform: rotate(90deg);

到

-webkit-transform: rotate(90deg) translate(-100px, 16px);

如你所知，這條線僅用於由WebKit的瀏覽器（Safari瀏覽器，Chrome瀏覽器）

你可能有玩弄確切的PX數字，但你可以擺脫額外的@media屏幕標籤。

來源

2012-10-19 08:22:43 JumpingJezza

查找到transform-origin。基本上，你應該可以做transform-origin: 0 0;（當然有所有的前綴），它會把旋轉鉤住左上角，這聽起來像你想要的。

來源

2012-03-07 13:07:39 visualidiot

好的建議，但不會改變在Chrome和Safari的行爲... – Anders 2012-03-07 18:30:58

@Anders是的，它的確如此。正如visualidiot所說，你必須插入前綴。 '-webkit-transform-origin：0 0;'很好。 – honk31 2013-02-14 18:32:21

Safari瀏覽器和Chrome瀏覽器，旋轉文本的位置去幹擾

回答

相關問題