Question

我正试图利用所有权管理系统过滤码(

展示这一问题的示范守则:

传真内容:

<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>

CSS的内容:

.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 );
}

共同提交文件的内容:

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

在案文左上角进行点击将显示警惕性,但是,在比规定高度低的可见文字上任何地方都不会登记。请注意,在IE7中,情况并非如此;可点面积也轮值。

我还尝试使用<代码>progid:DXImage Transform.Microsoft.BasicImage(rotation=3);代替矩阵过滤器,但结果相同。

是否有任何人过去必须处理这一问题,或者是否有有助于这种情况的任何信息?

EDIT: I ve replicated this on jsFiddle: http://jsfiddle.net/e46jD/

EDIT: Turns out I ve been burnt for relying on IE9 to provide accurate emulation of IE8. Testing the code in an actual installation of IE8 works fine. So, now the only problem is with IE9 itself.

Answer 1

I tried to change a bit your markup, wrapping your text inside an extra <span> element, in this way

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

因此,我改变了行文(注,I ve也修改了<代码>:汽车,因为有些信件被切割)。

.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 ); 
    }); 
});

In IE8 you can click also on the bottom area not covered by characters.

See the fork: http://jsfiddle.net/wdbK8/

Answer 2

我早就取得了有效成果,所有浏览器都成为目标,通过浏览器支持,将中央支助事务规则分开,并利用有条件的评论来对待国际电子数据处理。

The big showstopper was the fact that IE9 would rotate the element visibly as a result of DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod= auto expand ) but wouldn t rotate the interactable bounding box. I ve read since posting this question that IE9 has reduced support for filters, and so I ve set it up so that for IE7/8 it uses the filter, and for IE9 it uses -ms-transform.

较少代表,但现在工作。

Answer 3

这解决了我所有浏览者的问题。我的案文在轮换后被搁置,职位、顶层和婚后的财产帮助我揭开。 100%的宽度是重要的。生态和变质对IEE来说是不可或缺的。

#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);
}

友情链接