使用webkit转换应用css类在Safari或Chrome中不起作用

Question

我正在应用这个css类:

.turn90{
-moz-transform: rotate(90deg);  /* FF3.5+ */
-o-transform: rotate(90deg);  /* Opera 10.5 */
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}

通过:

document.getElementById("advancedsearchtoggle").className += " turn90"; 

它适用于Firefox和Opera,但不适用于Safari或Chrome.(还没试过IE)

我究竟做错了什么？

完整的JavaScript功能:

    var expanded=0;
    function searchparts(n)
    {
        if(expanded == 0){
            document.getElementById('search2').style.visibility = 'visible'; 
            document.getElementById('search3').style.visibility = 'visible'; 
            document.getElementById('search2').style.display = 'block'; 
            document.getElementById('search3').style.display = 'block'; 
            //window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
            document.getElementById("advancedsearchtoggle").className += " turn90"; 
            document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

            expanded = 1;   
        }else if(expanded == 1){
            document.getElementById('search2').style.visibility = 'collapse'; 
            document.getElementById('search3').style.visibility = 'collapse'; 
            document.getElementById('search2').style.display = 'none'; 
            document.getElementById('search3').style.display = 'none';
            window.scrollTo(0,findPos(document.getElementById('search1'))-60);
            document.getElementById("advancedsearchtoggle").className = " ";    
            document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)'; 

            expanded = 0;   
        }
    }

这是触发javascript的HTML:

<a class="plain" onclick="searchparts(2);" style="margin-right:20px;"><span style="text-decoration:underline;">Erweiterte Suche</span> <span id="advancedsearchtoggle" style="text-decoration:none;">&raquo;</span></a>

正如你所看到的,即使在推杆时

document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

直接进入javascript,它不起作用.当我检查"advancedsearchtoggle"时,我可以看到正确应用了类(以及我放入类中的任何其他CSS).只是旋转在Safari和Chrome中似乎不起作用.

Answer 1

我认为Webkit还不支持<span>标签上的轮换.请记住,供应商前缀CSS被称为"实验性"的原因.

它似乎支持像div,p或h1这样的标签上的旋转,但我注意到当我第一次尝试这样做时,符号消失了,因为你需要定义一个足够大的高度和宽度,以便旋转的元素适合内部.

例如,您可以将span标记更改为:

<p id="advancedsearchtoggle" style="width: 10px; height: 10px; text-decoration:none;">&raquo;</p>

这在某种程度上起作用,但如果您不知道正在旋转的文本的尺寸,则可能无法预测.

您可能能够找到在Webkit中正确旋转的另一个HTML文本标记,或者执行一些javascript来确定需要旋转的文本的高度和宽度...

Answer 2

webkit不支持内联元素的转换,只支持块/盒元素,尽管W3C的工作草案要求转换适用于块和内联元素.

您可以使用display:inline-block将内联元素转换为块元素

Answer 3

仅仅为了后人的目的:webkit似乎将旋转应用于设置为的元素display: inline-block.