CSS 3.0 rotate(90deg) 不是 'transform' 属性 的有效值

Question

我正在尝试让文本在我的列表项中垂直显示。 http://www.css3maker.com/text-rotation.html# 等几个网站指示我使用以下内容： -ms 变换：旋转（90 度）； /* IE 9 / -webkit 变换：旋转（90 度）； / Chrome, Safari, Opera */ 变换：旋转（90 度）；

我已将其放入我的 css 文件中，但 visual studio 2010 提供了警告：

1. 验证 (CSS 3.0): 'rotate(90deg)' 不是有效值 '-webkit-transform' 属性.
2. 验证 (CSS 3.0)：'rotate(90deg)' 不是 'transform' 属性
的有效值

为什么我会收到此警告？如果我忽略它那么它就不起作用，我不会收到 -ms-transform 的警告，但它似乎在 IE 中无论如何都不起作用。

这是我的代码： CSS:

li.menu_label > span
{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

HTML:

<ul id="nav">
    <li>
        <label class="menu_label" for="c1"> <span>Menu</span></label>
        <input type="checkbox" id="c1" />
</li>
</ul>

事实证明，无论警告如何，它都能正常工作，只是在 google chrome 中没有。需要添加 "display: inline-block" CSS3 transform not working

Answer 1

我想问题是您正在使用 Visual Studio 2010 来验证您的 CSS 代码。请记住，VS2010 可能是在 2009 年底推出的，rotate() property was added to IE9, released 2 years later。因此 VS2010 不知道 属性.

的存在

我的建议是要么忘记使用 VS2010 验证您的 CSS，要么升级到最新的 VS 版本。