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

问题描述

我正在尝试将按钮(带有)CSS3 样式(渐变)旋转 90 度，并将其应用到绝对右侧:0 像素位置.那个按钮是关于我们".

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

好像有两个问题.首先是按钮元素没有一直向右移动(就像我想要的那样)，似乎问题出在 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.

我还发现，在谷歌浏览器中，当我将鼠标悬停在Kaj točno delam"按钮上时，它没有正确应用渐变 - 这意味着在渐变开始之前按钮上有 1px(或 2)的黑色空间(从左到右) - 然而，当处于正常(水平)模式或向右(当我测试时)时，这不会发生.这也很奇怪，因为在使用 Chrome 开发者工具切换元素 :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 时，关于我们"的垂直按钮仅在将其按在顶部时有效(其他地方均无效).

Using Internet Explorer the vertical button "About us" 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?

感谢您的帮助.

推荐答案

如果你旋转一个元素，宽度保持不变.你需要像这样计算你的正确位置:

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;

So you need to take right: -61,5px; in stead of right: 0;

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