使用CSS3旋转按钮并将其应用于绝对右位置不起作用 [英] Rotating the button using CSS3 and applying it on absolute right position doesn't work

问题描述

我试图旋转一个按钮（使用）CSS3样式（渐变）90degress，并应用于绝对右：0px位置。该按钮是Kajtočnodelam。

Im trying to rotate a button (with) CSS3 styles (gradient) by 90degress and apply it on absolute right:0px position. That button is "Kaj točno delam".

这似乎有两个问题。首先是按钮元素不会一直向右（像我想要的），似乎问题是在CSS3旋转，仍然认为150px宽度。如果我禁用旋转，元素完全对齐到右侧屏幕，没有留下空间。

It seems like there are 2 problems. First is that the button element doesn't go all the way to the right (like I want it) and it seems that the problem is in CSS3 rotation that still thinks 150px width. If I disable the rotation, the element is aligned to the right screen perfectly, with no space left out.

此外，我发现在谷歌浏览器，当我将鼠标悬停在按钮Kajtočnodelam，它不正确应用渐变 - 意味着在梯度开始（从左到右）之前按钮上有1px（或2）的黑色空间 - 但是这不会发生，当在正常（水平）模式或正向（当我测试时）。这也很奇怪，因为当使用Chrome开发工具toogle元素：hover时，不会显示那么大。

Also I found that in Google Chrome, when i hover over the button "Kaj točno delam", it doesn't apply gradient correctly - meaning there is 1px (or 2) of black space on the button before the gradients starts (from left to right) - this however doesn't happen, when being in normal (horizontal) mode, or is being turned to the right (when i tested). It's also strange because that doesn't show as big when using Chrome Developer tools to toogle element :hover.

使用Internet Explorer垂直按钮Kajtočnodelam

Using Internet Explorer the vertical button "Kaj točno delam" only works when pressing it on top (and nowhere else).

所有这些问题是否因为CSS3 / HTML错误而发生？

Do all of this problems happen because of CSS3/HTML bug?

有没有更好的解决方案，这样做，而不使用图像？ - 可能使用jQuery或其他东西？

Is there any better solution to do this without using images? - perhaps using jQuery or something else?

PS：演示网站显示上面解释的问题位于这里： http://goo.gl/4PuQl

P.S: the demo website that shows the explained problem above is located here: http://goo.gl/4PuQl

感谢您的帮助。

-rok

推荐答案

如果旋转元素，宽度保持不变。您需要像这样计算您的权利位置：

If you rotate an element, the width stays the same. You need to calculate your right-position like this:

-(width/2-height/2) = -(150/2-27/2) = -61,5

所以你需要 right：-61,5px; 代替 right：0;

这篇关于使用CSS3旋转按钮并将其应用于绝对右位置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！