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＆amp;铬。

Answer 1

我认为Webkit不支持旋转＆lt; span＆gt;标签呢。请记住，供应商前缀CSS由于某种原因被称为“实验性”。

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

例如，您可以将span标记更改为：

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

在某种程度上有效，但如果您不知道正在旋转的文本的尺寸，则可能无法预测。

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

Answer 2

webkit does not support transforms on inline elements但是，只是阻止/装箱元素，尽管working draft from the W3C要求转换适用于块和内联元素。

您可以使用display：inline-block

将内联元素转换为块元素

Answer 3

仅出于后人的目的：webkit似乎将轮换应用于设置为display: inline-block的元素。

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

3 个答案: