在IE8中旋轉可點擊元素+

我正在嘗試使用專有的MS篩選器DXImageTransform.Microsoft.Matrix旋轉IE8中的可點擊元素。我已經正確地計算了矩陣，並且元素明顯旋轉，但是響應點擊的區域似乎保持與旋轉之前相同的形狀和位置。在IE8中旋轉可點擊元素+

實施例的代碼，其顯示這樣的問題：CSS的

<html>  
    <head> 
     <link rel="stylesheet" href="test.css"/> 
     <script src="jquery.js"></script> 
     <script src="test.js"></script> 
    </head> 
    <body> 
     <div class="rotated"> 
      Element which is longer than it is wide... 
     </div> 
    </body> 
</html>

含量：：JS的

.rotated { 
    height: 15px; /* required for IE7 to perform rotation */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand'); 
}

內容：HTML的

內容

jQuery(function($) { 
    $('.rotated').click(function() { 
     alert('You clicked within the original boundary'); 
    }); 
});

點擊左上角文本的內容將顯示警報，但是，在可見文本低於指定高度的任何位置都不會註冊。請注意，這不會在IE7中執行相同的操作;可點擊區域也旋轉。

我也試過用progid:DXImageTransform.Microsoft.BasicImage(rotation=3);來代替矩陣濾波器，但是這有相同的結果。

過去有沒有人需要處理這個問題，或者是否有任何有助於解決這種情況的信息？

編輯：我已經重複了這一對的jsfiddle： http://jsfiddle.net/e46jD/

編輯：原來我已經燒爲依託，IE9提供IE8的精確仿真。在IE8的實際安裝中測試代碼工作正常。所以，現在唯一的問題是IE9本身。

來源

2012-01-16 metafunk

我試着改了一下您的標記，包裝額外<span>元素中的文字，這樣

<div class="rotated"> 
    <span>Element which is longer than it is wide...</span> 
</div>

然後我適時改變風格（注意，我也改變了height: auto，因爲一些信件被切斷）

.rotated { 
    border: 1px red solid; 
    height: auto; /* required for IE7 to perform rotation */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand'); 
} 

span { display: block; }

和JavaScript，因此點擊事件附加上span

jQuery(function($) { 
    $('.rotated span').click(function() { 
     alert('You clicked within the original boundary'); 
    }); 
});

在IE8中，您還可以點擊字符未涵蓋的底部區域。

見叉：http://jsfiddle.net/wdbK8/

來源

2012-01-16 09:07:21 fcalderan

正如我的編輯中所解釋的，這適用於IE8。任何洞察到使這項工作的IE9？ – metafunk 2012-01-18 01:18:55

@metafunk我現在還沒有用於測試的IE9：它有什麼問題？它不旋轉文字或不可點擊？ – fcalderan 2012-01-18 08:31:13

會發生什麼，元素是可見的旋轉，但原始元素的有效邊界框不旋轉，所以唯一可點擊的部分是兩個（有效的頂角）的重疊。我懷疑這只是部分支持DXImageTransform.Microsoft。*過濾器，因爲IE9現在支持-ms-transform CSS規則。我已經給出和使用瀏覽器特定的類的元素:(在IE9上的 – metafunk 2012-01-20 03:43:55

我所取得有效的結果在所有瀏覽器我是通過瀏覽器支持分裂的CSS規則了，使用條件註釋，處理IE應用類靶向。

最引人注目的事實是IE9會因爲DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand')而顯着旋轉元素，但不會旋轉可交互的邊界框。自從發佈這個問題以來，我已經閱讀過IE9減少了對過濾器支持的問題，所以我已經設置好了，以便IE7/8使用過濾器，而對於IE9，它使用-ms-transform。

較不優雅，但現在它的工作。

來源

2012-01-20 03:52:13 metafunk

無論如何，濾波器變換與-ms變換（以及其他類似的現代CSS變換）不同。旋轉可以是相同的但是頂部的偏移量是不同的，如果我回憶過去的研究正確，過濾器會在頂部添加一個偏移量，以便元素的任何旋轉仍然具有與未旋轉時相同的「頂部」（而使用CSS轉換時，對象基本上圍繞對象的中心旋轉，因此它可能會在它之前重疊）。由於您可能必須使用篩選器來說明所述偏移量，因此您在這裏完成的是我所建議的。 – JayC 2012-01-20 04:14:53

這解決了我在所有瀏覽器中遇到的問題。旋轉後，我的文字被剪輯，位置，頂部和填充屬性幫助我。 100％的寬度很重要。過濾器和MS轉換是IE瀏覽器

#rotationCSS { 
    width:100%; 
    font-size:1.3em; 
    font-weight:bold; 
    float:right; 
    -webkit-transform: rotate(90deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(90deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(90deg)!important; /* IE 9 */ 
    -o-transform: rotate(90deg); /* Opera 10.50-12.00 */ 
    transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 
    position: absolute; 
    top: 20px; 
    padding: 35px 20px 0px 10px; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
}

來源

2013-07-11 19:50:51 Kamayani

在IE8中旋轉可點擊元素+

回答

相關問題