如何在Google Chrome中制作垂直html5进度栏

问题描述：

是否可以在Google Chrome中制作垂直HTML5进度栏？如何在Google Chrome中制作垂直html5进度栏

在Mozilla Firefox浏览器，它可以通过以下方式进行：

<style> 
    .vert { 
     -moz-orient: vertical; 
    } 
</style> 
<progress class="vert" style="position: absolute; top: 0px; left: 0px;" 
value="10" max="100" id="progressBar">No progress bar</progress>

答

你可以旋转它：

的Webkit：-webkit-transform: rotate(90deg);

火狐：-moz-transform: rotate(90deg);

IE：filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

-webkit-变换旋转，但位置元素现在不同于（0,0） – Max 2012-03-14 14:18:32

看起来像这样的风格是一种解决方案： '-webkit-transform：rotate（-90deg）translateY（-1000％）; -webkit-transform-origin：100％0％;' – Max 2012-03-14 15:13:43

更好的解决方案？ – Max 2012-03-14 15:14:40

答

我想你想-webkit-box-orient。

从Flexie结账box model playground。

不要为工作进展 – Max 2012-03-14 14:20:26

如何在Google Chrome中制作垂直html5进度栏

相关推荐